up

web/src/assets/css/base.css

@@ -1,14 +1,48 @@
-@font-face{
+@font-face {
   font-family: '思源宋体';
   src: url('../SiYuanSongTiRegular/SourceHanSerifCN-Bold-2.otf');
   font-weight: normal;
   font-style: normal;
 }
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
+
 ul li {
   list-style: none;
+}
+
+.comTit {
+  width: 98%;
+  font-family: '思源宋体';
+  color: #9F171C;
+  font-size: 24px;
+  border-right: 3px solid #9F171C;
+  padding-right: 20px;
+  text-align: right;
+  margin-bottom: 30px;
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 1px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: #8A7351;
+}
+
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
 }

web/src/router/index.js

@@ -14,6 +14,11 @@ const routes = [
     name: 'stair',
     component: () => import('../views/stair/index.vue')
   },
+  {
+    path: '/info/:id',
+    name: 'info',
+    component: () => import('../views/info/index.vue')
+  },
   
 ]
 

web/src/views/info/components/Son1.vue

@@ -0,0 +1,55 @@
+<!--  -->
+<template>
+<div class='Son1'>
+  <One tit='建村历史'/>
+  <One tit='历史人物'/>
+  <One tit='历史人物1'/>
+  <One tit='历史人物2'/>
+  <One tit='历史人物3'/>
+  <One tit='历史人物4'/>
+</div>
+</template>
+
+<script>
+import One from '@/components/one.vue'
+export default {
+name:'Son1',
+components: {One},
+data() {
+//这里存放数据
+return {
+
+};
+},
+//监听属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {
+
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
+
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
+
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.Son1{
+  width: 100%;
+  height: 100%;
+}
+
+</style>

web/src/views/info/index.vue

@@ -0,0 +1,484 @@
+<!--  -->
+<template>
+  <div class="info">
+    <div class="top">
+      <div
+        class="el-icon-arrow-left"
+        @click="$router.push(`/stair/${$route.params.id}`)"
+      >
+        返回
+      </div>
+      <div class="rightTab">
+        <div
+          class="row"
+          @click="cutInfo(item.id, item.children)"
+          :class="{ active: topDataInd === item.id }"
+          v-for="item in topData"
+          :key="item.id"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <div class="conten">
+      <div class="left">
+        <img src="../../assets/img/contCun/1001.png" alt="" />
+        <div class="leftRow">
+          <div
+            @click="cutScroll(item.id, index)"
+            class="row"
+            :class="{ leAc: leftInd === item.id }"
+            v-for="(item, index) in leftData"
+            :key="item.id"
+          >
+            <img
+              :src="
+                require(`@/assets/img/conBs${
+                  leftInd === item.id ? 'Ac' : ''
+                }.png`)
+              "
+              alt=""
+            />
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </div>
+      <!-- 主要切换内容 -->
+      <div class="right">
+        <Son1 />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Son1 from "./components/Son1.vue";
+export default {
+  name: "info",
+  components: { Son1 },
+  data() {
+    //这里存放数据
+    return {
+      leftInd: "1001",
+      leftData: [
+        {
+          id: "1001",
+          parentId: "1000",
+          sort: 1001,
+          name: "建村历史",
+        },
+        {
+          id: "1002",
+          parentId: "1000",
+          sort: 1002,
+          name: "历史人物",
+        },
+        {
+          id: "1003",
+          parentId: "1000",
+          sort: 1003,
+          name: "历史事件",
+        },
+        {
+          id: "1004",
+          parentId: "1000",
+          sort: 1004,
+          name: "族谱家训",
+        },
+        {
+          id: "1005",
+          parentId: "1000",
+          sort: 1005,
+          name: "口述史",
+        },
+        {
+          id: "1006",
+          parentId: "1000",
+          sort: 1006,
+          name: "视频集",
+        },
+      ],
+      topDataInd: "1000",
+      topData: [
+        {
+          id: "1000",
+          parentId: "0",
+          sort: 1000,
+          name: "历史文化",
+          children: [
+            {
+              id: "1001",
+              parentId: "1000",
+              sort: 1001,
+              name: "建村历史",
+            },
+            {
+              id: "1002",
+              parentId: "1000",
+              sort: 1002,
+              name: "历史人物",
+            },
+            {
+              id: "1003",
+              parentId: "1000",
+              sort: 1003,
+              name: "历史事件",
+            },
+            {
+              id: "1004",
+              parentId: "1000",
+              sort: 1004,
+              name: "族谱家训",
+            },
+            {
+              id: "1005",
+              parentId: "1000",
+              sort: 1005,
+              name: "口述史",
+            },
+            {
+              id: "1006",
+              parentId: "1000",
+              sort: 1006,
+              name: "视频集",
+            },
+          ],
+        },
+        {
+          id: "2000",
+          parentId: "0",
+          sort: 2000,
+          name: "环境格局",
+          children: [
+            {
+              id: "2001",
+              parentId: "2000",
+              sort: 2001,
+              name: "村落选址",
+            },
+            {
+              id: "2002",
+              parentId: "2000",
+              sort: 2002,
+              name: "村落格局",
+            },
+            {
+              id: "2003",
+              parentId: "2000",
+              sort: 2003,
+              name: "建村智慧",
+            },
+            {
+              id: "2004",
+              parentId: "2000",
+              sort: 2004,
+              name: "自然环境",
+            },
+            {
+              id: "2005",
+              parentId: "2000",
+              sort: 2005,
+              name: "风景名胜",
+            },
+            {
+              id: "2006",
+              parentId: "2000",
+              sort: 2006,
+              name: "文物古迹",
+            },
+            {
+              id: "2007",
+              parentId: "2000",
+              sort: 2007,
+              name: "历史环境要素",
+            },
+          ],
+        },
+        {
+          id: "3000",
+          parentId: "0",
+          sort: 3000,
+          name: "传统建筑",
+          children: [
+            {
+              id: "3001",
+              parentId: "3000",
+              sort: 3001,
+              name: "建筑信息",
+            },
+            {
+              id: "3002",
+              parentId: "3000",
+              sort: 3002,
+              name: "村落风貌",
+            },
+            {
+              id: "3003",
+              parentId: "3000",
+              sort: 3003,
+              name: "视频集",
+            },
+          ],
+        },
+        {
+          id: "4000",
+          parentId: "0",
+          sort: 4000,
+          name: "民俗文化",
+          children: [
+            {
+              id: "4001",
+              parentId: "4000",
+              sort: 4001,
+              name: "节日活动",
+            },
+            {
+              id: "4002",
+              parentId: "4000",
+              sort: 4002,
+              name: "祭祀崇礼",
+            },
+            {
+              id: "4003",
+              parentId: "4000",
+              sort: 4003,
+              name: "婚丧嫁娶",
+            },
+            {
+              id: "4004",
+              parentId: "4000",
+              sort: 4004,
+              name: "地方方言",
+            },
+            {
+              id: "4005",
+              parentId: "4000",
+              sort: 4005,
+              name: "特色文化",
+            },
+            {
+              id: "4006",
+              parentId: "4000",
+              sort: 4006,
+              name: "视频集",
+            },
+          ],
+        },
+        {
+          id: "5000",
+          parentId: "0",
+          sort: 5000,
+          name: "美食物产",
+          children: [
+            {
+              id: "5001",
+              parentId: "5000",
+              sort: 5001,
+              name: "特色物产",
+            },
+            {
+              id: "5002",
+              parentId: "5000",
+              sort: 5002,
+              name: "商业集市",
+            },
+            {
+              id: "5003",
+              parentId: "5000",
+              sort: 5003,
+              name: "生产工艺",
+            },
+            {
+              id: "5004",
+              parentId: "5000",
+              sort: 5004,
+              name: "服装服饰",
+            },
+            {
+              id: "5005",
+              parentId: "5000",
+              sort: 5005,
+              name: "美味美食",
+            },
+            {
+              id: "5006",
+              parentId: "5000",
+              sort: 5006,
+              name: "运输工具",
+            },
+            {
+              id: "5007",
+              parentId: "5000",
+              sort: 5007,
+              name: "村规民约",
+            },
+            {
+              id: "5008",
+              parentId: "5000",
+              sort: 5008,
+              name: "视频集",
+            },
+          ],
+        },
+        {
+          id: "6000",
+          parentId: "0",
+          sort: 6000,
+          name: "旅游导览",
+          children: [
+            {
+              id: "6001",
+              parentId: "6000",
+              sort: 6001,
+              name: "入村路线",
+            },
+            {
+              id: "6002",
+              parentId: "6000",
+              sort: 6002,
+              name: "村内导览",
+            },
+          ],
+        },
+      ],
+      // 一个内容的高度
+      pageHeight: null,
+      pageInd: 0,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    pageInd(val) {
+      let dom = document.querySelector(".conten");
+      dom.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
+    },
+  },
+  //方法集合
+  methods: {
+    cutScroll(id, index) {
+      this.leftInd = id;
+      this.pageInd = index;
+    },
+    cutInfo(id, val) {
+      this.topDataInd = id;
+      this.leftData = val;
+      this.leftInd = val[0].id;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.$nextTick(() => {
+      // 获取一个页面的高度
+      let domH = document.querySelector(".conten .right");
+      this.pageHeight = domH.clientHeight;
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.info {
+  width: 100%;
+  height: 100%;
+  .top {
+    z-index: 10;
+    min-width: 1800px;
+    padding: 0 150px 0 120px;
+    color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    background-color: #d4c6b4;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .el-icon-arrow-left {
+      cursor: pointer;
+      font-size: 24px;
+    }
+    .rightTab {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      padding-left: 300px;
+      .row {
+        margin-right: 90px;
+        cursor: pointer;
+        padding: 0 12px;
+        height: 100px;
+        line-height: 100px;
+        font-size: 24px;
+      }
+      .active {
+        pointer-events: none;
+        color: #9f171c;
+        border-bottom: 2px solid #9f171c;
+      }
+    }
+  }
+  .conten {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    padding: 100px 140px 0;
+    background: url("../../assets/img/contenBG.png");
+    .left {
+      position: fixed;
+      top: 100px;
+      left: 140px;
+      padding-top: 50px;
+      width: 300px;
+      height: 100%;
+      & > img {
+        width: 145px;
+        height: 255px;
+      }
+      .leftRow {
+        margin: 30px 0 0 58px;
+        width: calc(100% - 58px);
+        height: 450px;
+        border-left: 1px solid #cab58d;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        .row {
+          position: relative;
+          padding-left: 30px;
+          font-family: "思源宋体";
+          font-size: 24px;
+          color: #d9c8a9;
+          cursor: pointer;
+          & > img {
+            position: absolute;
+            top: 50%;
+            left: -16px;
+            transform: translateY(-50%);
+            width: 32px;
+            height: 26px;
+          }
+        }
+        .leAc {
+          pointer-events: none;
+          color: #9f171c;
+        }
+      }
+    }
+    .right {
+      padding-left: 358px;
+      height: 100%;
+    }
+  }
+}
+</style>

web/src/views/stair/component/card.vue

@@ -114,6 +114,7 @@ export default {
       display: flex;
       justify-content: space-between;
       .row {
+        cursor: pointer;
         position: relative;
         width: 277px;
         height: 440px;

web/src/views/stair/index.vue

@@ -109,9 +109,9 @@ export default {
           this.isShowGood = false;
         }, 1800);
         return;
-      }else {
-        this.btnDataAc=id
-      }
+      }else if(id===5){
+        this.$router.push(`/info/${this.$route.params.id}`)
+      }else this.btnDataAc=id
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）

web/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: './'
+}