|
|
@@ -1,282 +1,196 @@
|
|
|
<template>
|
|
|
<div id="index">
|
|
|
- <div class="w_0100">
|
|
|
- <div class="w_1200">
|
|
|
- <div class="servicemain">
|
|
|
- <div class="serviceOne">
|
|
|
- <el-col :span="24">
|
|
|
- <el-col :span="12" class="infoleft">
|
|
|
- <el-col class="lefttop" :span="24"><span class="title"> |</span> 本地服务</el-col>
|
|
|
- <ul>
|
|
|
- <li class="zhengwuList" v-for="(item, index) in zhengwuList" :key="index">
|
|
|
- <a @click="zhengwuBtn(item)">
|
|
|
- <el-image style="width:64px;height:64px;" :src="item.pic"></el-image>
|
|
|
- <p>{{ item.title }}</p>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-col :span="12" class="left">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <el-col :span="2" class="image">
|
|
|
+ <el-image :src="iconImage"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22" class="txt">
|
|
|
+ <span>科技咨讯</span>
|
|
|
+ <span>C</span>
|
|
|
+ <span>onsulting</span>
|
|
|
+ <span>更多</span>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" class="inforight">
|
|
|
- <div class="lefttop"><span class="title"> |</span> 合作服务</div>
|
|
|
- <ul>
|
|
|
- <li class="serviceList" v-for="(item, index) in serviceList" :key="index">
|
|
|
- <a @click="serviceBtn(item)">
|
|
|
- <el-image style="width:64px;height:64px;" :src="item.pic"></el-image>
|
|
|
- <p>{{ item.title }}</p>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ 列表
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- <div class="infocontext">
|
|
|
- <div class="contexttop"><span class="title"> |</span> 公众参与</div>
|
|
|
- <ul>
|
|
|
- <li v-for="(item, index) in gongzhongList" :key="index">
|
|
|
- <a @click="bendiserviceBtn(index)">
|
|
|
- <el-image :src="item.pic"></el-image>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-col :span="12" class="right">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <el-col :span="2" class="image">
|
|
|
+ <el-image :src="iconImage"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22" class="txt">
|
|
|
+ <span>工作动态</span>
|
|
|
+ <span>D</span>
|
|
|
+ <span>ynamic</span>
|
|
|
+ <span>更多</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ 列表
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <el-image :src="centerurl"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="three">
|
|
|
+ <el-col :span="12" class="left">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <el-col :span="2" class="image">
|
|
|
+ <el-image :src="iconImage"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22" class="txt">
|
|
|
+ <span>通知通告</span>
|
|
|
+ <span>N</span>
|
|
|
+ <span>otice</span>
|
|
|
+ <span>更多</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ 列表
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="right">
|
|
|
+ <el-col :span="24" class="leftTop">
|
|
|
+ <el-col :span="2" class="image">
|
|
|
+ <el-image :src="iconImage"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="22" class="txt">
|
|
|
+ <span>技术前沿</span>
|
|
|
+ <span>F</span>
|
|
|
+ <span>ront</span>
|
|
|
+ <span>更多</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ 列表
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { createNamespacedHelpers, mapGetters, mapState } from 'vuex';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
export default {
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
- data: () => {
|
|
|
+ data: function() {
|
|
|
return {
|
|
|
- // 本地服务
|
|
|
- zhengwuList: [
|
|
|
- {
|
|
|
- pic: require('@/assets/live/bendi1.png'),
|
|
|
- title: '智慧推荐',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/bendi2.png'),
|
|
|
- title: '展会管理',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/bendi3.png'),
|
|
|
- title: '科技评估',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/bendi4.png'),
|
|
|
- title: '合同在线',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/bendi5.png'),
|
|
|
- title: '信用认证',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/bendi6.png'),
|
|
|
- title: '绩效评价',
|
|
|
- },
|
|
|
- ],
|
|
|
- // 合作服务
|
|
|
- serviceList: [
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo1.png'),
|
|
|
- title: '知识产权',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo2.png'),
|
|
|
- title: '科技文献',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo3.png'),
|
|
|
- title: '项目申报',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo4.png'),
|
|
|
- title: '科技金融',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo5.png'),
|
|
|
- title: '科技孵化',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo6.png'),
|
|
|
- title: '成果登记',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo7.png'),
|
|
|
- title: '技术合同',
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/hezuo8.png'),
|
|
|
- title: '高企认证',
|
|
|
- },
|
|
|
- ],
|
|
|
- // 公众参与
|
|
|
- gongzhongList: [
|
|
|
- {
|
|
|
- pic: require('@/assets/live/gongzhong1.jpg'),
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/gongzhong2.jpg'),
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/gongzhong3.jpg'),
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/gongzhong4.jpg'),
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/gongzhong5.jpg'),
|
|
|
- },
|
|
|
- {
|
|
|
- pic: require('@/assets/live/gongzhong6.jpg'),
|
|
|
- },
|
|
|
- ],
|
|
|
+ // 中间图片
|
|
|
+ centerurl: require('@a/dynamic8.png'),
|
|
|
+ iconImage: require('@/assets/live/square_big.png'),
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
- methods: {
|
|
|
- // 本地服务
|
|
|
- zhengwuBtn(item) {
|
|
|
- // if (item.title == '展会管理') {
|
|
|
- // this.$router.push({ path: '/live/service/list', query: { column_name: item.title } });
|
|
|
- // } else {
|
|
|
- // this.$message({
|
|
|
- // message: '功能开发中',
|
|
|
- // type: 'warning',
|
|
|
- // });
|
|
|
- // }
|
|
|
- this.$router.push({ path: '/live/service/list', query: { column_name: item.title } });
|
|
|
- },
|
|
|
- // 合作服务
|
|
|
- serviceBtn(item) {
|
|
|
- this.$router.push({ path: '/live/service/list', query: { column_name: item.title, activeNames: '2' } });
|
|
|
- // this.$message({
|
|
|
- // message: '功能开发中',
|
|
|
- // type: 'warning',
|
|
|
- // });
|
|
|
- },
|
|
|
- // 公众参与
|
|
|
- bendiserviceBtn(index) {
|
|
|
- this.$message({
|
|
|
- message: '功能开发中',
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
+ methods: {},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
- pageTitle() {
|
|
|
- return `${this.$route.meta.title}`;
|
|
|
- },
|
|
|
- },
|
|
|
- metaInfo() {
|
|
|
- return { title: this.$route.meta.title };
|
|
|
},
|
|
|
+ watch: {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.w_1200 {
|
|
|
- margin: 0 auto;
|
|
|
- // width: 80%;
|
|
|
width: 1200px;
|
|
|
- min-height: 600px;
|
|
|
-}
|
|
|
-.serviceOne {
|
|
|
- margin: 20px 0 0 0;
|
|
|
-}
|
|
|
-.infoleft {
|
|
|
- height: 320px;
|
|
|
- box-shadow: 0 0 10px #2d64b3;
|
|
|
- width: 49%;
|
|
|
-}
|
|
|
-.infoleft ul .zhengwuList {
|
|
|
- float: left;
|
|
|
- width: 25%;
|
|
|
- height: 115px;
|
|
|
- margin: 0 5% 15px 3%;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.infoleft ul .zhengwuList p {
|
|
|
- font-size: 20px;
|
|
|
- color: #215199;
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.inforight {
|
|
|
- height: 320px;
|
|
|
- box-shadow: 0 0 10px #2d64b3;
|
|
|
- width: 49.5%;
|
|
|
- margin: 0 0 0 15px;
|
|
|
-}
|
|
|
-.inforight ul .serviceList {
|
|
|
- float: left;
|
|
|
- width: 17%;
|
|
|
- height: 105px;
|
|
|
- margin: 0 5% 20px 3%;
|
|
|
- text-align: center;
|
|
|
- background: #f8f8f8;
|
|
|
-}
|
|
|
-.inforight ul .serviceList .el-image {
|
|
|
- padding: 5px 0 0 0;
|
|
|
-}
|
|
|
-.inforight ul .serviceList p {
|
|
|
- font-size: 20px;
|
|
|
- color: #215199;
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.lefttop {
|
|
|
- width: 96%;
|
|
|
- height: 41px;
|
|
|
- line-height: 35px;
|
|
|
- border-bottom: 1px solid #e5e5e5;
|
|
|
- position: relative;
|
|
|
- bottom: 1px;
|
|
|
- margin: 10px 10px 20px 10px;
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
-.title {
|
|
|
- padding: 0px 0 1px 1px;
|
|
|
- background: #005293;
|
|
|
-}
|
|
|
-.infoleft ul li {
|
|
|
- float: left;
|
|
|
- width: 20%;
|
|
|
- height: 115px;
|
|
|
- margin: 0 2% 10px 3%;
|
|
|
-}
|
|
|
-.infocontext {
|
|
|
- height: 237px;
|
|
|
- box-shadow: 0 0 10px #2d64b3;
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
-
|
|
|
- margin: 25px 0 0 0;
|
|
|
-}
|
|
|
-.contexttop {
|
|
|
- width: 98%;
|
|
|
- height: 41px;
|
|
|
- line-height: 35px;
|
|
|
- border-bottom: 1px solid #e5e5e5;
|
|
|
- position: relative;
|
|
|
- bottom: 1px;
|
|
|
- margin: 10px 10px 20px 10px;
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
-
|
|
|
-.infocontext ul li {
|
|
|
- float: left;
|
|
|
- width: 15.66%;
|
|
|
- height: 146px;
|
|
|
- margin: 0px 0px 0 1%;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
-.newimg {
|
|
|
- width: 185px;
|
|
|
+.main {
|
|
|
+ margin: 15px 0;
|
|
|
+ .one {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ height: 500px;
|
|
|
+ overflow: hidden;
|
|
|
+ .left {
|
|
|
+ .info {
|
|
|
+ height: 450px;
|
|
|
+ border: 1px solid red;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ .info {
|
|
|
+ height: 450px;
|
|
|
+ border: 1px solid red;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 130px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .three {
|
|
|
+ height: 500px;
|
|
|
+ overflow: hidden;
|
|
|
+ .left {
|
|
|
+ .info {
|
|
|
+ height: 450px;
|
|
|
+ border: 1px solid red;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ .info {
|
|
|
+ height: 450px;
|
|
|
+ border: 1px solid red;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.leftTop {
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ .txt {
|
|
|
+ height: 47px;
|
|
|
+ line-height: 47px;
|
|
|
+ border-bottom: 3px solid #044b79;
|
|
|
+ span:first-child {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ color: #92959a;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 0 0 10px;
|
|
|
+ }
|
|
|
+ span:nth-child(3) {
|
|
|
+ color: #92959a;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ float: right;
|
|
|
+ padding: 0 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #044b79;
|
|
|
+ }
|
|
|
+ span:last-child:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
