样式更新

src/layout/index/chengguo.vue

@@ -7,10 +7,13 @@
             <span :style="`border-color:${borderColor}`">{{title}}</span>
           </el-col>
           <el-col :span="6" style="text-align:right;">
-            <el-link :underline="false" :style="`color:${Color}`" @click="$router.push({ path: `list/${chengguolist[0].id}` })">MORE<i class="el-icon-video-play"></i></el-link>
+            <el-link :underline="false" :style="`color:${Color}`"
+                     @click="$router.push({ path: `list/${chengguolist[0].id}` })">MORE<i
+                 class="el-icon-video-play"></i></el-link>
           </el-col>
         </el-col>
-        <el-col :span="24" class="newsMain">
+        <!-- chengguolist -->
+        <!-- <el-col :span="24" class="newsMain">
            <el-col :span="24" v-for="(tag, index) in chengguolist" :key="index" :type="tag.type">
               <el-col class="chengguolist" :span="24" v-for="(item, index) in tag.children" :key="index">
                 <el-col :span="16" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">
@@ -21,6 +24,22 @@
                 </el-col>
               </el-col>
             </el-col>
+        </el-col> -->
+        <el-col :span="24" class="newsMain">
+          <el-col :span="24" v-for="(tag, index) in chengguolist" :key="index" :type="tag.type">
+            <el-carousel indicator-position="outside">
+              <el-carousel-item v-for="(item, index) in tag.children" :key="index">
+                <el-col :span="24" class="link" @click.native="$router.push({ name: 'detail', params:{id:item.id} })">
+                  <el-col :span="24">
+                    <el-image style="width:100%;height:345px;" :src="item.pic"></el-image>
+                  </el-col>
+                  <el-col :span="24" class="title" :unerline="false">
+                    <p>{{item.title}}</p>
+                  </el-col>
+                </el-col>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -37,7 +56,7 @@ export default {
   data: () => ({
     borderColor: '#850000',
     Color: '#850000',
-    title: '成果展示'
+    title: '成果展示',
   }),
   created() {
   },
@@ -58,6 +77,7 @@ p {
 }
 .news {
   padding: 10px;
+  height: 399px;
 }
 .topTit {
   border-bottom: 1px solid #ccc;
@@ -74,9 +94,33 @@ p {
 }
 .newsMain {
   padding: 5px 0;
+  height: 356px;
+}
+/deep/.el-carousel__container {
+  height: 345px;
+}
+/deep/.el-carousel__indicators {
+  display: none;
 }
-.chengguolist p:hover{
-  color:#850000;
+.newsMain .title {
+  position: absolute;
+  bottom: 0;
+  background: rgba(119, 136, 153, 0.5);
+}
+.newsMain .title p {
+  height: 59px;
+  line-height: 60px;
+  font-size: 25px;
+  padding: 0 10px;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.newsMain .link:hover {
   cursor: pointer;
 }
+.newsMain .link .title:hover p {
+  color: #1e90ff;
+}
 </style>

src/layout/index/mingshi.vue

@@ -1,14 +1,13 @@
 <template>
   <div id="mingshi">
     <el-row>
-      <el-col :span="24" class="news">
+      <!-- <el-col :span="24" class="news">
         <el-col :span="24" class="topTit">
           <el-col :span="18">
             <span :style="`border-color:${borderColor}`">{{title}}</span>
           </el-col>
           <el-col :span="6" style="text-align:right;"> 
             <el-link :underline="false" :style="`color:${Color}`" @click="$router.push({ path: `list/${mingshilist[0].id}` })">MORE<i class="el-icon-video-play"></i></el-link>
-            
           </el-col>
         </el-col>
           <el-col :span="24" class="newsMain">
@@ -23,6 +22,32 @@
               </el-col>
             </el-col>
           </el-col>
+      </el-col> -->
+      <el-col :span="24" class="mingshi">
+        <el-col :span="24" class="image">
+          <el-link :underline="false">
+            <el-image :src='zyjs'>
+            </el-image>
+          </el-link>
+        </el-col>
+        <el-col :span="24" class="image">
+          <el-link :underline="false">
+            <el-image :src='zhsq'>
+            </el-image>
+          </el-link>
+        </el-col>
+        <el-col :span="24" class="image">
+          <el-link :underline="false">
+            <el-image :src='jsdl'>
+            </el-image>
+          </el-link>
+        </el-col>
+        <el-col :span="24" class="image">
+          <el-link :underline="false">
+            <el-image :src='yxsk'>
+            </el-image>
+          </el-link>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -32,15 +57,20 @@
 export default {
   name: 'mingshi',
   props: {
-    mingshilist:null,
+    mingshilist: null,
   },
   components: {},
   data: () => ({
-    borderColor:'#850000',
-    Color:'#850000',
-    title:"计算服务",
+    borderColor: '#850000',
+    Color: '#850000',
+    title: "计算服务",
+    zyjs: require('../../assets/zyjs.jpg'),
+    zhsq: require('../../assets/zhsq.jpg'),
+    jsdl: require('../../assets/jsdl.jpg'),
+    yxsk: require('../../assets/yxsk.jpg'),
+
   }),
-  created() {},
+  created() { },
   computed: {},
   methods: {},
 };
@@ -70,13 +100,24 @@ p {
 .newsMain {
   padding: 5px 0;
 }
-.chengguolist{
+.chengguolist {
   padding: 10px 0;
   border-bottom: 1px dashed #ccc;
   margin: 1px;
 }
-.chengguolist p:hover{
-  color:#850000;
+.chengguolist p:hover {
+  color: #850000;
   cursor: pointer;
 }
+.image {
+  padding: 10px 10px 0 10px;
+}
+.image .el-image {
+  width: 280px;
+  height: 85px;
+  border-radius: 10px;
+}
+.image .el-image__inner {
+  border-radius: 10px;
+}
 </style>

src/layout/list/tabsright.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="tabsright">
+    <el-row>
+      <el-col :span="24" class="mainRight">
+        <el-col :span="24" class="top">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>网站首页</el-breadcrumb-item>
+            <el-breadcrumb-item>二级菜单标题</el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane v-for="(item, index) in enterList" :key="index">
+              <span slot="label">{{ item.title }}</span>
+              <el-col :span="24" v-for="(tag, index) in item.children" :key="index" class="enterList">
+                <el-col :span="20" class="title textOver">
+                  <el-link :underline="false">
+                    {{ tag.title }} </el-link>
+                </el-col>
+                <el-col :span="4" class="time">
+                  {{ tag.publish_time }}
+                </el-col>
+              </el-col>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tabsright',
+  props: {
+    enterList: null,
+  },
+  components: {},
+  data: () => ({
+    activeName: '',
+    currentPage: 1,
+  }),
+  created() { },
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      // eslint-disable-next-line no-console
+      console.log(`当前页: ${val}`);
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  margin: 0;
+  padding: 0;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.top {
+  margin: 0 0 20px 0;
+}
+.main {
+  min-height: 400px;
+}
+.mainRightList {
+  padding: 10px 0;
+  border-bottom: 1px dashed #ccc;
+}
+.mainRightList .title p {
+  color: #666;
+}
+.mainRightList .title p:hover {
+  color: #336699;
+}
+.mainRightList .time {
+  text-align: right;
+  font-size: 14px;
+  color: #999;
+}
+.page {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/views/index/index.vue

@@ -107,7 +107,6 @@ export default {
 }
 .mains .mingshi {
   height: 400px;
-  border: 1px solid #ccc;
   overflow: hidden;
 }
 .mains .chengguo {

src/views/list/thirdlist.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="list">
+    <el-row style="overflow-y: hidden;">
+      <el-col :span="24" class="top">
+        <div class="w_1200">
+          <top :topInfo="topInfo" :topInfos="topInfos"></top>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <native></native>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="6" class="mainLeft">
+            <mainLeft></mainLeft>
+          </el-col>
+          <el-col :span="17" class="mainRight">
+            <tabsright :enterList="enterList"></tabsright>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="down">
+        <footinfo :topInfo="topInfo"></footinfo>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '../../layout/index/top.vue';
+import native from '../../layout/index/native.vue';
+import mainLeft from '../../layout/list/mainLeft.vue';
+import tabsright from '../../layout/list/tabsright.vue';
+import footinfo from '../../layout/index/foot.vue';
+export default {
+  name: 'list',
+  props: {
+    topInfos: null,
+    topInfo: null,
+    enterList: null,
+  },
+  components: {
+    top,
+    native,
+    footinfo,
+    mainLeft,
+    tabsright,
+  },
+  data: () => ({}),
+  created() { },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 150px;
+}
+.menu {
+  margin-bottom: 20px;
+  height: 40px;
+}
+.main {
+  min-height: 500px;
+  margin-bottom: 20px;
+}
+.main .mainLeft {
+  min-height: 500px;
+  border: 1px solid #ccc;
+}
+.main .mainRight {
+  padding: 20px;
+  float: right;
+  width: 880px;
+  min-height: 500px;
+  border: 1px solid #ccc;
+}
+.down {
+  min-height: 100px;
+  border: 1px solid #ccc;
+}
+</style>
+