|
|
@@ -1,68 +1,101 @@
|
|
|
-<!-- -->
|
|
|
<template>
|
|
|
<div class="layout">
|
|
|
- <!-- 上侧固定导航栏 -->
|
|
|
- <div class="lay_top">
|
|
|
- <div class="login">
|
|
|
- <img src="@/assets/img/logo.png" alt="" />
|
|
|
- <p> 中国人民解放军 陆 军 勤 务 学 院</p>
|
|
|
+ <!-- tab -->
|
|
|
+ <div
|
|
|
+ class="all"
|
|
|
+ v-show="$route.meta.myInd"
|
|
|
+ :class="{ activeAll: cutTab }"
|
|
|
+ @touchstart="cutTab = !cutTab"
|
|
|
+ ></div>
|
|
|
+ <div class="tab" :class="{ active: cutTab }" v-show="cutTab">
|
|
|
+ <div
|
|
|
+ class="small small1"
|
|
|
+ :class="{ activeSmall: $route.meta.myInd === 1 }"
|
|
|
+ @touchstart="jump('tab1')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/imgM/${
|
|
|
+ $route.meta.myInd === 1 ? 'tab1Ac' : 'tab1'
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p>数字史馆</p>
|
|
|
</div>
|
|
|
- <!-- 右边的盒子 -->
|
|
|
- <div class="conten">
|
|
|
- <!-- 当前时间 -->
|
|
|
- <div class="bot_time">
|
|
|
- {{ moment().format("LL") }} {{ moment().format("dddd") }}
|
|
|
- </div>
|
|
|
- <!-- tab栏 -->
|
|
|
- <div class="tab">
|
|
|
- <div
|
|
|
- class="tab_row"
|
|
|
- v-for="item in tabArr"
|
|
|
- :key="item.id"
|
|
|
- @click="jump(item.url)"
|
|
|
- >
|
|
|
- <div :class="{ active: $route.meta.myInd === item.id }">
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- <img
|
|
|
- v-show="$route.meta.myInd === item.id"
|
|
|
- src="@/assets/img/active.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="small small2"
|
|
|
+ :class="{ activeSmall: $route.meta.myInd === 2 }"
|
|
|
+ @touchstart="jump('tab2')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/imgM/${
|
|
|
+ $route.meta.myInd === 2 ? 'tab2Ac' : 'tab2'
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p>校园全景</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="small small3"
|
|
|
+ :class="{ activeSmall: $route.meta.myInd === 3 }"
|
|
|
+ @touchstart="jump('tab3')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/imgM/${
|
|
|
+ $route.meta.myInd === 3 ? 'tab3Ac' : 'tab3'
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p>文物典藏</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="small small4"
|
|
|
+ :class="{ activeSmall: $route.meta.myInd === 4 }"
|
|
|
+ @touchstart="jump('tab4')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/imgM/${
|
|
|
+ $route.meta.myInd === 4 ? 'tab4Ac' : 'tab4'
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p>信息检索</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 下侧内容 -->
|
|
|
- <div class="right_con">
|
|
|
- <Router-view />
|
|
|
- </div>
|
|
|
+ <!-- 切换的组件页面 -->
|
|
|
+ <Router-view/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》 from '《组件路径》';
|
|
|
+
|
|
|
export default {
|
|
|
- name: "layout",
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
components: {},
|
|
|
data() {
|
|
|
- // 这里存放数据
|
|
|
+ //这里存放数据
|
|
|
return {
|
|
|
- tabArr: [
|
|
|
- { url: "tab1", id: 1, name: "数字史馆" },
|
|
|
- { url: "tab2", id: 2, name: "校园全景" },
|
|
|
- { url: "tab3", id: 3, name: "文物典藏" },
|
|
|
- { url: "tab4", id: 4, name: "信息检索" }
|
|
|
- ],
|
|
|
+ cutTab: false,
|
|
|
};
|
|
|
},
|
|
|
- // 监听属性 类似于data概念
|
|
|
+ //监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
- // 监控data中的数据变化
|
|
|
+ //监控data中的数据变化
|
|
|
watch: {},
|
|
|
- // 方法集合
|
|
|
+ //方法集合
|
|
|
methods: {
|
|
|
// 点击tab栏
|
|
|
jump(url) {
|
|
|
+ this.cutTab=false
|
|
|
if (url === "tab1") url = "/index?m=TEST";
|
|
|
this.$router.replace(url).catch(() => {});
|
|
|
if (url === "/index?m=TEST") {
|
|
|
@@ -74,98 +107,110 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {},
|
|
|
- // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
- beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
- beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
- updated() {}, // 生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
- destroyed() {}, // 生命周期 - 销毁完成
|
|
|
- activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.layout {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- min-width: 1900px;
|
|
|
- min-height: 900px;
|
|
|
- color: #fff;
|
|
|
- .lay_top {
|
|
|
- display: flex;
|
|
|
- z-index: 999;
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 120px;
|
|
|
- background-color: #b0111e;
|
|
|
- .login {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 100px;
|
|
|
- width: 320px;
|
|
|
- height: 120px;
|
|
|
- background-size: 100% 100%;
|
|
|
- & > img {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
- & > p {
|
|
|
- font-size: 24px;
|
|
|
- color: #f2cd83;
|
|
|
- font-weight: 700;
|
|
|
- padding: 21px;
|
|
|
- }
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+.all {
|
|
|
+ z-index: 100;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 15px;
|
|
|
+ right: 15px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url("../../assets/imgM/all.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.activeAll {
|
|
|
+ background: url("../../assets/imgM/allAc.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.tab {
|
|
|
+ transform: translate(50px, 50px);
|
|
|
+ border-radius: 50%;
|
|
|
+ z-index: 99;
|
|
|
+ position: fixed;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: transparent;
|
|
|
+ bottom: 0px;
|
|
|
+ right: 0px;
|
|
|
+ .small {
|
|
|
+ z-index: 101;
|
|
|
+ text-align: center;
|
|
|
+ width: 60px;
|
|
|
+ height: 50px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 52px;
|
|
|
+ left: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ & > img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
- .conten {
|
|
|
- color: #f2cd83;
|
|
|
- flex: 1;
|
|
|
- .bot_time {
|
|
|
- text-align: right;
|
|
|
- padding-right: 260px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- border-bottom: 1px solid #f2cd83;
|
|
|
- }
|
|
|
- .tab {
|
|
|
- padding-top: 13px;
|
|
|
- height: 79px;
|
|
|
- background: url('../../assets/img/layTopBac.png') no-repeat right;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding-right: 120px;
|
|
|
- .tab_row {
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- height: 60px;
|
|
|
- & > div {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .active {
|
|
|
- color: #f2cd83;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- & > img {
|
|
|
- width: 53px;
|
|
|
- height: 19px;
|
|
|
- }
|
|
|
- &:hover div{
|
|
|
- color: #f2cd83;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ & > p {
|
|
|
+ transform: scale(0.7) translateY(-10px);
|
|
|
}
|
|
|
}
|
|
|
- .right_con {
|
|
|
- background: url('../../assets/img/layoutBac.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
+ .small1 {
|
|
|
+ & > p {
|
|
|
+ transform: scale(0.7) translateY(-15px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .small2 {
|
|
|
+ bottom: 97px;
|
|
|
+ left: 8px;
|
|
|
+ }
|
|
|
+ .small3 {
|
|
|
+ bottom: 136px;
|
|
|
+ left: 43px;
|
|
|
+ }
|
|
|
+ .small4 {
|
|
|
+ bottom: 144px;
|
|
|
+ left: 93px;
|
|
|
+ }
|
|
|
+ .activeSmall {
|
|
|
+ color: #b92e2e;
|
|
|
+ }
|
|
|
+}
|
|
|
+.active {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ width: 98%;
|
|
|
+ height: 98%;
|
|
|
+ top: 5px;
|
|
|
+ left: 5px;
|
|
|
+ border: 1px solid #b92e2e;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ width: 95%;
|
|
|
+ height: 95%;
|
|
|
+ top: 8px;
|
|
|
+ left: 8px;
|
|
|
+ border: 1px solid #b92e2e;
|
|
|
}
|
|
|
+ background-color: rgba(194, 181, 162, 0.8);
|
|
|
}
|
|
|
-</style>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+</style>
|
