|
|
@@ -1,44 +1,81 @@
|
|
|
<template>
|
|
|
<div class="unit-list">
|
|
|
- <aside
|
|
|
- :class="{
|
|
|
- expand: isExpand,
|
|
|
- }"
|
|
|
- >
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <img
|
|
|
- class="banner"
|
|
|
- src=""
|
|
|
- alt=""
|
|
|
- draggable="false"
|
|
|
- >
|
|
|
- <h2>运河镌石------馆藏大运河沿线碑拓展</h2>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img
|
|
|
- class="banner"
|
|
|
- src=""
|
|
|
- alt=""
|
|
|
- draggable="false"
|
|
|
- >
|
|
|
- <h2>运河上的舟楫小书展</h2>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <button
|
|
|
- class="expand-shrink"
|
|
|
- @click="onClickExpandShrink"
|
|
|
- >
|
|
|
- 展开-收起
|
|
|
- </button>
|
|
|
- </aside>
|
|
|
<main>
|
|
|
- <h3>前言</h3>
|
|
|
- <p>这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言</p>
|
|
|
+ <h3 class="foreword">
|
|
|
+ 前言
|
|
|
+ </h3>
|
|
|
+ <p class="foreword">
|
|
|
+ 这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言这是前言
|
|
|
+ </p>
|
|
|
<ul>
|
|
|
+ <li
|
|
|
+ @click="$router.push({
|
|
|
+ name: 'RelicList',
|
|
|
+ query: {
|
|
|
+ idx: '0',
|
|
|
+ },
|
|
|
+ })"
|
|
|
+ >
|
|
|
+ <h3>章节标题</h3>
|
|
|
+ <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
|
|
|
+ <button class="detail-entry">
|
|
|
+ 藏品鉴赏
|
|
|
+ <img
|
|
|
+ class="arrow"
|
|
|
+ src="@/assets/images/red-arrow-right.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
<li>
|
|
|
<h3>章节标题</h3>
|
|
|
<p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
|
|
|
+ <button class="detail-entry">
|
|
|
+ 藏品鉴赏
|
|
|
+ <img
|
|
|
+ class="arrow"
|
|
|
+ src="@/assets/images/red-arrow-right.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ </li><li>
|
|
|
+ <h3>章节标题</h3>
|
|
|
+ <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
|
|
|
+ <button class="detail-entry">
|
|
|
+ 藏品鉴赏
|
|
|
+ <img
|
|
|
+ class="arrow"
|
|
|
+ src="@/assets/images/red-arrow-right.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ </li><li>
|
|
|
+ <h3>章节标题</h3>
|
|
|
+ <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
|
|
|
+ <button class="detail-entry">
|
|
|
+ 藏品鉴赏
|
|
|
+ <img
|
|
|
+ class="arrow"
|
|
|
+ src="@/assets/images/red-arrow-right.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ </li><li>
|
|
|
+ <h3>章节标题</h3>
|
|
|
+ <p>章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容章节内容</p>
|
|
|
+ <button class="detail-entry">
|
|
|
+ 藏品鉴赏
|
|
|
+ <img
|
|
|
+ class="arrow"
|
|
|
+ src="@/assets/images/red-arrow-right.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</main>
|
|
|
@@ -64,72 +101,99 @@ export default {
|
|
|
.unit-list{
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
- >aside{
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 200px;
|
|
|
- height: 100%;
|
|
|
- background-color: blue;
|
|
|
- transition: width 0.5s;
|
|
|
- border-radius: 0 10px 10px 0;
|
|
|
- >ul{
|
|
|
- background: yellow;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: calc(100% - 50px);
|
|
|
- overflow: auto;
|
|
|
- >li{
|
|
|
- max-width: 500px;
|
|
|
- flex: 0 0 auto;
|
|
|
- >img.banner{
|
|
|
- background: red;
|
|
|
- object-fit: contain;
|
|
|
- }
|
|
|
- >h2{
|
|
|
- background: white;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- >button.expand-shrink{
|
|
|
- bottom: 20px;
|
|
|
- left: 50%;
|
|
|
- position: absolute;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
+ background-image: url(@/assets/images/unit-list-bg.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ overflow: auto;
|
|
|
+ &::-webkit-scrollbar { width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
|
|
|
+
|
|
|
+ h3{
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #404036;
|
|
|
}
|
|
|
- >aside.expand{
|
|
|
- width: 100%;
|
|
|
+ p{
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: KingHwa_OldSong-Regular, KingHwa_OldSong;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #404036;
|
|
|
+ line-height: 28px;
|
|
|
+ width: 73.6vw;
|
|
|
+ text-indent: 2em;
|
|
|
}
|
|
|
>main{
|
|
|
- >h3{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ >h3.foreword{
|
|
|
+ margin-top: 46px;
|
|
|
+ margin-bottom: 32px;
|
|
|
}
|
|
|
- >p{
|
|
|
+ >p.foreword{
|
|
|
+ margin-bottom: 90px;
|
|
|
}
|
|
|
>ul{
|
|
|
- counter-reset: my-count;
|
|
|
>li{
|
|
|
- >h3{
|
|
|
- ::before{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 76.4vw;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover{
|
|
|
+ box-shadow: 3px 6px 19px 0px rgba(61, 34, 3, 0.2);
|
|
|
+ >h3{
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ left: -12px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-100%, -50%);
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ background-image: url(@/assets/images/title-deco.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >p{
|
|
|
+ margin-bottom: 33px;
|
|
|
+ }
|
|
|
+ >button.detail-entry{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ >img.arrow{
|
|
|
+ margin-left: 9px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ >h3{
|
|
|
+ position: relative;
|
|
|
+ margin-top: 42px;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
>p{
|
|
|
-
|
|
|
+ margin-bottom: 99px;
|
|
|
+ }
|
|
|
+ >button.detail-entry{
|
|
|
+ display: none;
|
|
|
+ width: 209px;
|
|
|
+ height: 48px;
|
|
|
+ background-image: url(@/assets/images/relic-list-page-entry-button-deco.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Source Han Serif CN-Bold, Source Han Serif CN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #7F0007;
|
|
|
+ line-height: 28px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-ul {
|
|
|
- > li {
|
|
|
- counter-increment: count;
|
|
|
- > span {
|
|
|
- &::before {
|
|
|
- content: counter(count, upper-alpha);
|
|
|
}
|
|
|
}
|
|
|
}
|
任一存
