index.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <div id="index">
  3. <el-col :span="24" class="main">
  4. <el-col :span="12" class="left">
  5. <el-col :span="1" class="leftTitle">
  6. <p>科<br />技<br />产<br />品</p>
  7. <p></p>
  8. </el-col>
  9. <el-col :span="23" class="infoLeft">
  10. <el-col :span="12" class="productList" v-for="(item, index) in productList" :key="index" @click.native="detail(item)">
  11. <el-image :src="item.image[0].url"></el-image>
  12. <p>{{ item.name }}</p>
  13. </el-col>
  14. </el-col>
  15. <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
  16. </el-col>
  17. <el-col :span="12" class="right">
  18. <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
  19. <el-col :span="23" class="infoRight"> </el-col>
  20. <el-col :span="1" class="rightTitle">
  21. <p></p>
  22. <p>技<br />术<br />供<br />求</p>
  23. </el-col>
  24. </el-col>
  25. <el-col :span="24">
  26. <el-image :src="gongqiuImage" class="gongqiuImage"></el-image>
  27. </el-col>
  28. </el-col>
  29. </div>
  30. </template>
  31. <script>
  32. export default {
  33. name: 'index',
  34. props: {},
  35. components: {},
  36. data: () => ({
  37. gongqiuImage: require('@/assets/live/main2.png'),
  38. productList: [
  39. { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
  40. { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
  41. { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
  42. { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
  43. ],
  44. }),
  45. created() {},
  46. computed: {},
  47. methods: {},
  48. };
  49. </script>
  50. <style lang="less" scoped>
  51. .gongqiuImage {
  52. width: 100%;
  53. height: 100%;
  54. }
  55. .main {
  56. width: 80%;
  57. margin: 5px auto;
  58. float: none;
  59. }
  60. .left {
  61. float: left;
  62. height: 500px;
  63. margin: 10px 0 10px 0;
  64. overflow: hidden;
  65. }
  66. .leftTitle {
  67. text-align: center;
  68. position: relative;
  69. }
  70. .leftTitle p:first-child {
  71. font-size: 18px;
  72. color: #044b79;
  73. font-weight: bold;
  74. }
  75. .leftTitle p:last-child {
  76. float: left;
  77. width: 2px;
  78. height: 402px;
  79. background-color: #044b79;
  80. margin: 0 5px;
  81. position: absolute;
  82. left: 9px;
  83. }
  84. .infoLeft {
  85. height: 480px;
  86. padding: 0 10px;
  87. }
  88. .productList {
  89. position: relative;
  90. margin: 0 10px 10px 0;
  91. width: 48%;
  92. height: 220px;
  93. }
  94. .productList:nth-child(2n) {
  95. margin: 0 0 10px 0;
  96. }
  97. .productList .el-image {
  98. width: 100%;
  99. height: 220px;
  100. }
  101. .productList p {
  102. position: absolute;
  103. text-align: center;
  104. bottom: 0;
  105. height: 50px;
  106. line-height: 50px;
  107. padding: 0 10px;
  108. background: #044b799f;
  109. color: #fff;
  110. width: 91%;
  111. font-size: 18px;
  112. }
  113. .leftListDown {
  114. position: relative;
  115. }
  116. .leftListDown span:first-child {
  117. display: inline-block;
  118. width: 400px;
  119. height: 3px;
  120. background: rgba(4, 75, 121, 0.37);
  121. margin: 0 10px 0 0;
  122. position: absolute;
  123. left: -10px;
  124. top: 10px;
  125. }
  126. .leftListDown span:last-child {
  127. font-size: 16px;
  128. float: right;
  129. padding: 0 15px 0 0;
  130. color: #044b79;
  131. font-weight: 700;
  132. }
  133. .right {
  134. float: right;
  135. height: 500px;
  136. overflow: hidden;
  137. margin: 10px 0 10px 0;
  138. }
  139. .rightListTop {
  140. position: relative;
  141. }
  142. .rightListTop span:first-child {
  143. font-size: 16px;
  144. float: left;
  145. padding: 0 0 0 15px;
  146. color: #044b79;
  147. font-weight: 700;
  148. }
  149. .rightListTop span:last-child {
  150. display: inline-block;
  151. width: 400px;
  152. height: 3px;
  153. background: rgba(4, 75, 121, 0.37);
  154. margin: 0 10px 0 0;
  155. position: absolute;
  156. right: -10px;
  157. top: 10px;
  158. }
  159. .infoRight {
  160. height: 480px;
  161. padding: 0 10px;
  162. }
  163. .rightTitle {
  164. text-align: center;
  165. }
  166. .rightTitle p:first-child {
  167. width: 2px;
  168. height: 370px;
  169. background: #044b79;
  170. position: relative;
  171. left: 10px;
  172. top: -20px;
  173. }
  174. .rightTitle p:last-child {
  175. font-size: 18px;
  176. font-weight: bold;
  177. color: #044b79;
  178. }
  179. </style>