123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <template>
- <div id="index">
- <el-col :span="24" class="main">
- <el-col :span="12" class="left">
- <el-col :span="1" class="leftTitle">
- <p>科<br />技<br />产<br />品</p>
- <p></p>
- </el-col>
- <el-col :span="23" class="infoLeft">
- <el-col :span="12" class="productList" v-for="(item, index) in productList" :key="index" @click.native="detail(item)">
- <el-image :src="item.image[0].url"></el-image>
- <p>{{ item.name }}</p>
- </el-col>
- </el-col>
- <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
- </el-col>
- <el-col :span="12" class="right">
- <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
- <el-col :span="23" class="infoRight"> </el-col>
- <el-col :span="1" class="rightTitle">
- <p></p>
- <p>技<br />术<br />供<br />求</p>
- </el-col>
- </el-col>
- <el-col :span="24">
- <el-image :src="gongqiuImage" class="gongqiuImage"></el-image>
- </el-col>
- </el-col>
- </div>
- </template>
- <script>
- export default {
- name: 'index',
- props: {},
- components: {},
- data: () => ({
- gongqiuImage: require('@/assets/live/main2.png'),
- productList: [
- { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
- { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
- { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
- { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
- ],
- }),
- created() {},
- computed: {},
- methods: {},
- };
- </script>
- <style lang="less" scoped>
- .gongqiuImage {
- width: 100%;
- height: 100%;
- }
- .main {
- width: 80%;
- margin: 5px auto;
- float: none;
- }
- .left {
- float: left;
- height: 500px;
- margin: 10px 0 10px 0;
- overflow: hidden;
- }
- .leftTitle {
- text-align: center;
- position: relative;
- }
- .leftTitle p:first-child {
- font-size: 18px;
- color: #044b79;
- font-weight: bold;
- }
- .leftTitle p:last-child {
- float: left;
- width: 2px;
- height: 402px;
- background-color: #044b79;
- margin: 0 5px;
- position: absolute;
- left: 9px;
- }
- .infoLeft {
- height: 480px;
- padding: 0 10px;
- }
- .productList {
- position: relative;
- margin: 0 10px 10px 0;
- width: 48%;
- height: 220px;
- }
- .productList:nth-child(2n) {
- margin: 0 0 10px 0;
- }
- .productList .el-image {
- width: 100%;
- height: 220px;
- }
- .productList p {
- position: absolute;
- text-align: center;
- bottom: 0;
- height: 50px;
- line-height: 50px;
- padding: 0 10px;
- background: #044b799f;
- color: #fff;
- width: 91%;
- font-size: 18px;
- }
- .leftListDown {
- position: relative;
- }
- .leftListDown span:first-child {
- display: inline-block;
- width: 400px;
- height: 3px;
- background: rgba(4, 75, 121, 0.37);
- margin: 0 10px 0 0;
- position: absolute;
- left: -10px;
- top: 10px;
- }
- .leftListDown span:last-child {
- font-size: 16px;
- float: right;
- padding: 0 15px 0 0;
- color: #044b79;
- font-weight: 700;
- }
- .right {
- float: right;
- height: 500px;
- overflow: hidden;
- margin: 10px 0 10px 0;
- }
- .rightListTop {
- position: relative;
- }
- .rightListTop span:first-child {
- font-size: 16px;
- float: left;
- padding: 0 0 0 15px;
- color: #044b79;
- font-weight: 700;
- }
- .rightListTop span:last-child {
- display: inline-block;
- width: 400px;
- height: 3px;
- background: rgba(4, 75, 121, 0.37);
- margin: 0 10px 0 0;
- position: absolute;
- right: -10px;
- top: 10px;
- }
- .infoRight {
- height: 480px;
- padding: 0 10px;
- }
- .rightTitle {
- text-align: center;
- }
- .rightTitle p:first-child {
- width: 2px;
- height: 370px;
- background: #044b79;
- position: relative;
- left: 10px;
- top: -20px;
- }
- .rightTitle p:last-child {
- font-size: 18px;
- font-weight: bold;
- color: #044b79;
- }
- </style>
|