up

webM/src/components/card.vue

@@ -11,7 +11,8 @@
       }; z-index: ${cardData.length - index};`"
     >
       <img :src="info.cover" alt="" />
-      <div class="txt" v-if="index===0">
+      <span class="page" v-if="index === 0">{{ cardInd + 1 }}</span>
+      <div class="txt" v-if="index === 0">
         <h3>{{ info.h3 }}</h3>
         <p v-html="info.p"></p>
       </div>
@@ -27,10 +28,10 @@ export default {
       type: Array,
       default: () => [],
     },
-    keyval:{
-      type:String,
-      default: ''
-    }
+    keyval: {
+      type: String,
+      default: "",
+    },
   },
   components: {},
   data() {
@@ -115,10 +116,18 @@ export default {
     & > img {
       width: 100%;
     }
+    .page {
+      position: absolute;
+      font-weight: 700;
+      right: 5px;
+      bottom: 5px;
+      font-size: 16px;
+    }
+
     .txt {
-      flex: 1;
+      height: 260px;
       overflow-y: auto;
-      padding: 20px;
+      padding: 20px 20px 0;
       & > h3 {
         background: url("../assets/img/Layout/chosen.png") left center no-repeat;
         background-size: 22px 18px;

webM/src/router/index.js

@@ -38,7 +38,7 @@ const routes = [
         meta: { myTitle: 'Exhibitions', topColor: '#bf8a6d' },
         redirect: { name: 'ExCurrent' },
         children: [
-          // Current
+          // 二级路由子页面
           {
             path: '/Layout/Exhibitions/Current',
             name: 'ExCurrent',
@@ -65,6 +65,13 @@ const routes = [
           },
        ]
       },
+      //---------- 详情
+      {
+        path: '/Layout/Detail',
+        name: 'ExDetail',
+        component: () => import('../views/Exhibitions/Detail.vue'),
+        meta: { myTitle: 'Exhibitions Detail', topColor: '#801c20' },
+      },
     ]
   }
 ]

webM/src/views/Exhibitions/Current.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ExCurrent">
-    <div class="main">
-      <img :src="data.cover" alt="">
+    <div class="main" @click="toInfo(data.id)">
+      <img :src="data.cover" alt="" />
       <h3 v-html="data.h3"></h3>
       <p v-html="data.p"></p>
     </div>
@@ -9,14 +9,14 @@
 </template>
 
 <script>
-import {Current} from './data'
+import { Current } from "./data";
 export default {
   name: "ExCurrent",
   components: {},
   data() {
     //这里存放数据
     return {
-      data:[]
+      data: {},
     };
   },
   //监听属性 类似于data概念
@@ -24,10 +24,17 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    toInfo(id) {
+      this.$router.push({
+        name: "ExDetail",
+        query: { id, k:1 },
+      });
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.data=Current
+    this.data = Current;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -41,5 +48,23 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
+.ExCurrent {
+  width: 100%;
+  .main {
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      padding: 20px;
+      font-size: 20px;
+    }
+    & > p {
+      padding: 0 20px 40px;
+      color: #6a6a6a;
+      font-size: 16px;
+      line-height: 20px;
+    }
+  }
+}
 </style>

webM/src/views/Exhibitions/data.js

@@ -1,5 +1,4 @@
-export const Current =[
-  {
+export const Current ={
     id: 1,
     year: '',
     yrahTxt: '',
@@ -35,4 +34,3 @@ export const Current =[
     }
   }
 
-]