|
|
@@ -0,0 +1,255 @@
|
|
|
+<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>
|
|
|
+ <h1 class="desc-title">
|
|
|
+ 说明
|
|
|
+ </h1>
|
|
|
+ <ul class="sample-wrap">
|
|
|
+ <li>
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/badge-architecture.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>营造专家</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/badge-hitstory.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>历史达人</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/badge-protector.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <span>护书使者</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <p class="desc">
|
|
|
+ 共设置【营造专家】【历史达人】【护书使者】三个徽章，每个部分查看超过5个知识点即可获得相应徽章。
|
|
|
+ </p>
|
|
|
+ <h1 class="login-tip">
|
|
|
+ 需登陆后才能参与答题
|
|
|
+ </h1>
|
|
|
+ <div class="login-button-wrap">
|
|
|
+ <button class="login">
|
|
|
+ <div class="text-wrapper">
|
|
|
+ 登录
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ <button class="sign-up">
|
|
|
+ <div class="text-wrapper">
|
|
|
+ 注册
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <p class="statistics">
|
|
|
+ 当前访客{{ visitNum }}人次，已发放[营造专家]徽章{{ yingZaoZhuanJiaNum }}枚，[历史达人]{{ liShiDaRen }}枚徽章，[护书使者]徽章{{ liShiDaRen }}枚
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visitNum: 1939,
|
|
|
+ yingZaoZhuanJiaNum: 56,
|
|
|
+ liShiDaRen: 424,
|
|
|
+ huShuShiZhe: 32,
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</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(10px);
|
|
|
+ z-index: 10000;
|
|
|
+ > .wrapper-1 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 850px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-image: url(@/assets/images/rule-desc-bg.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ text-align: center;
|
|
|
+ padding: 90px 50px 80px 40px;
|
|
|
+ overflow: auto;
|
|
|
+ > .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 78px;
|
|
|
+ right: 53px;
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ 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 92px 22px 92px;
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: LiSu-Regular, LiSu;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #9A2D0A;
|
|
|
+ }
|
|
|
+ > .introduction {
|
|
|
+ margin-top: 5px;
|
|
|
+ > p {
|
|
|
+ text-align: initial;
|
|
|
+ text-indent: 2em;
|
|
|
+ text-align: justify;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #693D2F;
|
|
|
+ line-height: 26px;
|
|
|
+ width: 941px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .desc-title {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(@/assets/images/title_decorator.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ padding: 0 92px 22px 92px;
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: LiSu-Regular, LiSu;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #9A2D0A;
|
|
|
+ }
|
|
|
+ > ul.sample-wrap {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ > li {
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 87px;
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: initial;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ display: block;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #693D2F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > p.desc {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #693D2F;
|
|
|
+ }
|
|
|
+ > h1.login-tip {
|
|
|
+ margin-top: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #9A2D0A;
|
|
|
+ }
|
|
|
+ > .login-button-wrap {
|
|
|
+ margin-top: 26px;
|
|
|
+ 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: 147px;
|
|
|
+ height: 45px;
|
|
|
+ padding: 3px;
|
|
|
+ &:first-of-type {
|
|
|
+ margin-right: 29px;
|
|
|
+ > .text-wrapper {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(143, 72, 49, 0.8);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24px;
|
|
|
+ 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: 24px;
|
|
|
+ font-family: LiSu-Regular, LiSu;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .statistics {
|
|
|
+ margin-top: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #693D2F;
|
|
|
+ line-height: 26px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存
