index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. <template>
  2. <div id='overview'>
  3. <div class='overview-box'>
  4. <div class='view-title'>
  5. <nav>
  6. <span></span>
  7. <span>项目基本信息</span>
  8. </nav>
  9. <div class='view-button'>
  10. <img src='../../assets/imgs/file.svg' alt />
  11. 项目资料
  12. </div>
  13. </div>
  14. <div class='view-box'>
  15. <div class='view-left'>
  16. <div class='view-left-top'>
  17. <div class='view-top-imgL'>
  18. <rotation :rotationImg='rotationImg'></rotation>
  19. </div>
  20. <div class='view-top-imgR'>
  21. <rotation :rotationImg='rotationImg'></rotation>
  22. <!-- <i class='i-r'></i> -->
  23. <!-- <img src='../../assets/imgs/open.svg' alt /> -->
  24. </div>
  25. </div>
  26. <div class='view-left-bottom'>
  27. <nav>
  28. <span></span>
  29. <span>建筑综合信息</span>
  30. </nav>
  31. <p class='place-p'>
  32. <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
  33. </p>
  34. <span class='place-hr'></span>
  35. <div class='place-bottom'>
  36. <div class='place-bottom-row'>
  37. <div>
  38. <span>项目名称</span>
  39. <span>建筑高度</span>
  40. <span>楼层分布</span>
  41. <span>车位信息</span>
  42. </div>
  43. <div style='min-width:172px;'>
  44. <span>三明万达广场</span>
  45. <span>裙房31.22m</span>
  46. <span>地上5层/地下2层</span>
  47. <span>地上832个/地下0个</span>
  48. </div>
  49. </div>
  50. <div class='place-bottom-row'>
  51. <div>
  52. <span>竣工日期</span>
  53. <span>开业日期</span>
  54. <span>移交日期</span>
  55. </div>
  56. <div style='min-width:172px;'>
  57. <span>2016年11月21日</span>
  58. <span>2016年12月30日</span>
  59. <span>2017年04月30日</span>
  60. </div>
  61. </div>
  62. <div class='place-bottom-row'>
  63. <div>
  64. <span style='margin-bottom:32px'>建筑面积</span>
  65. <span>租赁面积</span>
  66. </div>
  67. <div>
  68. <span>
  69. 13.07万㎡
  70. 其中地上9.90万㎡、地下3.55万㎡
  71. </span>
  72. <span>
  73. 6.45㎡
  74. 其中地上5.82万㎡,地下0.63万㎡
  75. </span>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <div class='view-right'>
  82. <nav>
  83. <span></span>
  84. <span>施工单位信息</span>
  85. </nav>
  86. <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
  87. <div class='view-right-bottom-l'>{{item.type}}</div>
  88. <div class='view-right-bottom-r'>{{item.company}}</div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </template>
  95. <script>
  96. import Rotation from '@/components/rotation'
  97. export default {
  98. data() {
  99. return {
  100. rightA: [
  101. { type: '总包', company: '中国建筑第一工程局有限公司' },
  102. { type: '弱电', company: '中国建筑第一工程局有限公司' },
  103. { type: '消防', company: '中国建筑第一工程局有限公司' },
  104. { type: '机电', company: '中国建筑第一工程局有限公司' },
  105. { type: '给排水', company: '南京金鸿装饰工程有限公司、深圳建装业集团股份有限公司广西建工集团有限公司' },
  106. { type: '精装', company: '中国建筑第一工程局有限公司' },
  107. { type: '电梯', company: '中国建筑第一工程局有限公司' }
  108. ],
  109. rotationImg: [
  110. require('@/assets/imgs/survey_pop1.png'),
  111. require('@/assets/imgs/survey_pop2.png'),
  112. require('@/assets/imgs/survey_pop1.png')
  113. ]
  114. }
  115. },
  116. methods: {},
  117. components: {
  118. Rotation
  119. }
  120. }
  121. </script>
  122. <style lang="less" scoped>
  123. #overview {
  124. padding: 16px 20px 22px 20px;
  125. background: #f2f5f7;
  126. height: 100%;
  127. .overview-box {
  128. height: 100%;
  129. display: flex;
  130. flex-direction: column;
  131. .view-title {
  132. margin-bottom: 16px;
  133. display: flex;
  134. justify-content: space-between;
  135. height: 32px;
  136. padding: 5px 0;
  137. nav {
  138. // padding: 5px 0;
  139. display: flex;
  140. align-items: center;
  141. width: 161px;
  142. span:nth-of-type(1) {
  143. width: 2px;
  144. height: 16px;
  145. background: #025baa;
  146. margin-right: 6px;
  147. display: inline-block;
  148. }
  149. span:nth-of-type(2) {
  150. width: 107px;
  151. height: 22px;
  152. font-size: 14px;
  153. font-family: MicrosoftYaHeiSemibold;
  154. color: #1f2429;
  155. line-height: 19px;
  156. }
  157. }
  158. .view-button {
  159. width: 106px;
  160. height: 32px;
  161. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  162. font-size: 14px;
  163. color: #ffffff;
  164. display: flex;
  165. align-items: center;
  166. justify-content: center;
  167. img {
  168. margin-right: 6px;
  169. }
  170. }
  171. }
  172. .view-box {
  173. display: flex;
  174. height: 100%;
  175. // height: 100%;
  176. // height: calc(100vh - 45px);
  177. .view-left {
  178. flex: 1;
  179. height: 100%;
  180. // min-width: 855px;
  181. // max-width: 1285px;
  182. margin-right: 15px;
  183. .view-left-top {
  184. // min-height: 327px;
  185. display: flex;
  186. margin-bottom: 20px;
  187. // justify-content: space-between;
  188. .view-top-imgL {
  189. height: 487px;
  190. width: 799px;
  191. // height: calc(100vh - 400px);
  192. // height: 100%;
  193. // flex: 1;
  194. // max-width: 540px;
  195. margin-right: 16px;
  196. background: rgba(216, 216, 216, 1);
  197. // position: relative;
  198. .view-top-imgL-auto {
  199. // width: 100%;
  200. // min-width: 540px;
  201. // height: 100%;
  202. }
  203. // .i-r {
  204. // position: absolute;
  205. // top: 0;
  206. // right: 0;
  207. // width: 32px;
  208. // height: 32px;
  209. // background: rgba(0, 0, 0, 0.6);
  210. // box-shadow: 0px 4px 6px 0px rgba(2, 20, 37, 0.12);
  211. // border-radius: 0px 4px 0px 4px;
  212. // }
  213. // img {
  214. // display: inline-block;
  215. // position: absolute;
  216. // top: 3px;
  217. // right: 0;
  218. // width: 32px;
  219. // height: 32px;
  220. // }
  221. }
  222. .view-top-imgR {
  223. height: 487px;
  224. // flex: 1;
  225. background: #cccccc;
  226. width: 453px;
  227. // position: relative;
  228. // .i-r {
  229. // position: absolute;
  230. // top: 0;
  231. // right: 0;
  232. // width: 32px;
  233. // height: 32px;
  234. // background: rgba(0, 0, 0, 0.6);
  235. // box-shadow: 0px 4px 6px 0px rgba(2, 20, 37, 0.12);
  236. // border-radius: 0px 4px 0px 4px;
  237. // }
  238. // img {
  239. // display: inline-block;
  240. // position: absolute;
  241. // top: 3px;
  242. // right: 0;
  243. // width: 32px;
  244. // height: 32px;
  245. // }
  246. }
  247. }
  248. .view-left-bottom {
  249. // height: auto;
  250. height: 449px;
  251. background: #ffffff;
  252. padding: 16px 16px 54px 16px;
  253. nav {
  254. padding: 5px 0;
  255. display: flex;
  256. align-items: center;
  257. width: 161px;
  258. background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  259. span:nth-of-type(1) {
  260. width: 2px;
  261. height: 16px;
  262. background: #025baa;
  263. margin-right: 6px;
  264. display: inline-block;
  265. }
  266. span:nth-of-type(2) {
  267. width: 107px;
  268. height: 22px;
  269. font-size: 14px;
  270. font-family: MicrosoftYaHeiSemibold;
  271. color: #025baa;
  272. line-height: 19px;
  273. }
  274. }
  275. .place-p {
  276. margin: 16px 0;
  277. height: 22px;
  278. font-size: 14px;
  279. font-family: MicrosoftYaHei;
  280. color: rgba(31, 36, 41, 1);
  281. line-height: 19px;
  282. display: flex;
  283. align-items: center;
  284. img {
  285. margin-right: 3px;
  286. }
  287. }
  288. .place-hr {
  289. width: 823px;
  290. height: 1px;
  291. background: #979797;
  292. display: block;
  293. margin-bottom: 16px;
  294. }
  295. .place-bottom {
  296. display: flex;
  297. .place-bottom-row {
  298. display: flex;
  299. justify-content: space-around;
  300. div {
  301. span {
  302. display: block;
  303. }
  304. }
  305. div:nth-of-type(1) {
  306. margin-right: 16px;
  307. span {
  308. width: 56px;
  309. font-size: 14px;
  310. font-family: MicrosoftYaHei;
  311. color: rgba(100, 108, 115, 1);
  312. line-height: 32px;
  313. }
  314. }
  315. div:nth-of-type(2) {
  316. margin-right: 16px;
  317. span {
  318. font-size: 14px;
  319. font-family: MicrosoftYaHei;
  320. color: rgba(31, 36, 41, 1);
  321. line-height: 32px;
  322. }
  323. }
  324. }
  325. }
  326. }
  327. }
  328. .view-right {
  329. // flex: 1;
  330. min-width: 456px;
  331. max-width: 595px;
  332. padding: 16px;
  333. background: #ffffff;
  334. nav {
  335. padding: 5px 0;
  336. display: flex;
  337. align-items: center;
  338. width: 161px;
  339. background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  340. span:nth-of-type(1) {
  341. width: 2px;
  342. height: 16px;
  343. background: #025baa;
  344. margin-right: 6px;
  345. display: inline-block;
  346. }
  347. span:nth-of-type(2) {
  348. width: 107px;
  349. height: 22px;
  350. font-size: 14px;
  351. font-family: MicrosoftYaHeiSemibold;
  352. color: #025baa;
  353. line-height: 19px;
  354. }
  355. }
  356. .view-right-bottom {
  357. display: flex;
  358. margin-top: 12px;
  359. .view-right-bottom-l {
  360. min-width: 42px;
  361. margin-right: 16px;
  362. font-size: 14px;
  363. font-family: MicrosoftYaHei;
  364. color: #646c73;
  365. line-height: 32px;
  366. }
  367. .view-right-bottom-r {
  368. font-size: 14px;
  369. font-family: MicrosoftYaHei;
  370. color: #1f2429;
  371. line-height: 32px;
  372. }
  373. }
  374. }
  375. }
  376. }
  377. }
  378. </style>