|
|
@@ -0,0 +1,275 @@
|
|
|
+<template>
|
|
|
+ <div class="rule-desc">
|
|
|
+ <div class="wrapper-1">
|
|
|
+ <button
|
|
|
+ class="close"
|
|
|
+ @click="$router.go(-1)"
|
|
|
+ />
|
|
|
+ <h1 class="introduction-title">
|
|
|
+ 导语
|
|
|
+ </h1>
|
|
|
+ <div class="introduction">
|
|
|
+ <p>文澜阁是珍藏《四库全书》的清代七大皇家藏书楼之一，也是现仅存江南唯一的一座皇家藏书楼。文澜阁于乾隆四十九年（1784）建成，至乾隆末年《四库全书》排架集齐后对外开放，在一定程度上让杭州有了一座“公共图书馆”。</p>
|
|
|
+ <p>文澜阁与其《四库全书》历经多重艰辛与磨难，在岁月与战火中也曾阁圮书散。几代乡贤学者不懈努力，拾残补缺，恢复旧观，文澜阁与其《四库全书》才得以幸存，这不失为中国文化史上的一大奇迹。</p>
|
|
|
+ <p>中国古代藏书楼具有较高的历史、科学与艺术价值，它不仅收集和保存了丰富的文化典籍，也整理和传播了博大精深的祖国文化。如今，文澜阁依然屹立于西子湖畔，向世人传递着源远流长、绵延不绝的文化品质和人文精神。</p>
|
|
|
+ </div>
|
|
|
+ <div class="splitter" />
|
|
|
+ <p class="desc">
|
|
|
+ 当前访客 1939人次，已发放
|
|
|
+ </p>
|
|
|
+ <ul class="sample-wrap">
|
|
|
+ <li>
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/badge-architecture.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>{{ yingZaoZhuanJiaNum !== undefined ? yingZaoZhuanJiaNum : '' }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/badge-hitstory.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>{{ liShiDaRen !== undefined ? liShiDaRen : '' }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/badge-protector.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>{{ huShuShiZhe !== undefined ? huShuShiZhe : '' }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <template
|
|
|
+ v-if="!loginStatus"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="login-button-wrap"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="login"
|
|
|
+ @click="$router.push({name: 'Login'})"
|
|
|
+ >
|
|
|
+ <div class="text-wrapper">
|
|
|
+ 登录
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="sign-up"
|
|
|
+ @click="$router.push({name: 'SignUp'})"
|
|
|
+ >
|
|
|
+ <div class="text-wrapper">
|
|
|
+ 注册
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visitNum: undefined,
|
|
|
+ yingZaoZhuanJiaNum: undefined,
|
|
|
+ liShiDaRen: undefined,
|
|
|
+ huShuShiZhe: undefined,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...globalMapState([
|
|
|
+ 'loginStatus',
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ globalApi.fetchVisitInfo().then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ this.visitNum = res.visit
|
|
|
+ this.yingZaoZhuanJiaNum = res['1']
|
|
|
+ this.liShiDaRen = res['2']
|
|
|
+ this.huShuShiZhe = res['3']
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.rule-desc {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(46,32,19,0.55);
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ z-index: 10000;
|
|
|
+ > .wrapper-1 {
|
|
|
+ width: calc(95vh / 664 * 334);
|
|
|
+ height: 95vh;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-image: url(@/assets/images/rule-desc-bg-mobile.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ text-align: center;
|
|
|
+ padding: 8vh 4vh 10vh 5vh;
|
|
|
+ overflow: auto;
|
|
|
+ > .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 5vh;
|
|
|
+ right: 3.9vh;
|
|
|
+ width: 3.5vh;
|
|
|
+ height: 3.5vh;
|
|
|
+ background-image: url(@/assets/images/close.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ }
|
|
|
+ > h1.introduction-title {
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(@/assets/images/title_decorator.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ padding: 0 7vh 2vh 7vh;
|
|
|
+ font-size: 4vh;
|
|
|
+ font-family: LiSu-Regular, LiSu;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #9A2D0A;
|
|
|
+ }
|
|
|
+ > .introduction {
|
|
|
+ height: 52vh;
|
|
|
+ margin-top: 2vh;
|
|
|
+ overflow: auto;
|
|
|
+ padding-right: 1vh;
|
|
|
+ > p {
|
|
|
+ text-align: initial;
|
|
|
+ text-indent: 2em;
|
|
|
+ text-align: justify;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 2vh;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #693D2F;
|
|
|
+ line-height: 2.8vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .splitter {
|
|
|
+ margin-top: 1vh;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #B94D1C 50%, rgba(0, 0, 0, 0) 100%);
|
|
|
+ }
|
|
|
+ > p.desc {
|
|
|
+ margin-top: 1vh;
|
|
|
+ font-size: 1.5vh;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #693D2F;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ > ul.sample-wrap {
|
|
|
+ margin-top: 2vh;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ > li {
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 3.2vh;
|
|
|
+ width: 6vh;
|
|
|
+ height: 6vh;
|
|
|
+ position: relative;
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: initial;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 2px solid #FFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 2vh;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .login-button-wrap {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 5vh;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ > button {
|
|
|
+ background-image: url(@/assets/images/button-border-small.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ width: 16.25vh;
|
|
|
+ height: 4.5vh;
|
|
|
+ padding: 0.4vh;
|
|
|
+ &:first-of-type {
|
|
|
+ margin-right: 2.5vh;
|
|
|
+ > .text-wrapper {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(143, 72, 49, 0.8);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 2.2vh;
|
|
|
+ font-family: LiSu-Regular, LiSu;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ > .text-wrapper {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: transparent;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 2.2vh;
|
|
|
+ font-family: LiSu-Regular, LiSu;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存
