|
|
@@ -7,7 +7,20 @@
|
|
|
<el-row class="left_1" :gutter="20">
|
|
|
<el-col :span="4" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
|
|
|
<el-row>
|
|
|
- <el-image class="image" :src="getfile(item.file)" fit="fill" />
|
|
|
+ <div class="container group">
|
|
|
+ <a class="book-container">
|
|
|
+ <div class="book">
|
|
|
+ <div class="book-cover">
|
|
|
+ <!-- 书的正面图 -->
|
|
|
+ <img :src="getfile(item.file)" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="book-spine" :style="{ background: `url(${getfile(item.file)}) -64px 0 no-repeat` }">
|
|
|
+ <h1>{{ item.name || '暂无' }}</h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center; clear: both"><br /></div>
|
|
|
<el-col :span="24" class="other">
|
|
|
<el-col :span="24" class="title textOne">{{ item.name || '暂无' }}</el-col>
|
|
|
<el-col :span="24" class="other_2">{{ item.brief || '暂无' }}</el-col>
|
|
|
@@ -16,6 +29,7 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
+
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="page">
|
|
|
<el-pagination background layout="total, prev, pager, next" :page-sizes="[10, 20, 50, 100, 200]" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange"> </el-pagination>
|
|
|
@@ -28,6 +42,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+// // 图片引入
|
|
|
+// import oneUrl from '/images/one.jpeg'
|
|
|
// 接口
|
|
|
import { NotesStore } from '@/store/api/platform/notes'
|
|
|
const store = NotesStore()
|
|
|
@@ -81,7 +97,8 @@ const getfile = (item) => {
|
|
|
.two {
|
|
|
margin: 10px 0;
|
|
|
.two_2 {
|
|
|
- margin: 10px 0 0 0;
|
|
|
+ margin: 2cap 0 0 0;
|
|
|
+
|
|
|
.left {
|
|
|
.left_1 {
|
|
|
display: flex;
|
|
|
@@ -89,9 +106,176 @@ const getfile = (item) => {
|
|
|
.list {
|
|
|
margin: 0 0 12px 0;
|
|
|
|
|
|
- .image {
|
|
|
+ .group:after {
|
|
|
+ content: '.';
|
|
|
+ display: block;
|
|
|
+ height: 0;
|
|
|
+ clear: both;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ * html .group {
|
|
|
+ height: 1%;
|
|
|
+ }
|
|
|
+
|
|
|
+ *:first-child + html .group {
|
|
|
+ min-height: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ line-height: 1.9em;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #0b3065;
|
|
|
+ background-size: cover;
|
|
|
+ font-family: arial, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ // max-width: 60em;
|
|
|
+ // margin: 0 auto;
|
|
|
+ // padding: 0 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text.container {
|
|
|
+ max-width: 38em;
|
|
|
+ text-align: center;
|
|
|
+ margin: 50px auto 100px;
|
|
|
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: #da9803;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1.main-title {
|
|
|
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: normal;
|
|
|
+ margin: 1.25em;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 2.75em;
|
|
|
+ letter-spacing: -1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-bottom: 1em;
|
|
|
+ font-size: 1.25em;
|
|
|
+ }
|
|
|
+
|
|
|
+ hr {
|
|
|
+ margin: 2em 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-container {
|
|
|
+ // width: 220px;
|
|
|
+ // width: 375px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ -webkit-perspective: 1200px;
|
|
|
+ -moz-perspective: 1200px;
|
|
|
+ perspective: 1200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book {
|
|
|
+ z-index: 5;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
|
+ -webkit-transition: 0.75s;
|
|
|
+ -moz-transition: 0.75s;
|
|
|
+ transition: 0.75s;
|
|
|
+ -webkit-transform-style: preserve-3d;
|
|
|
+ -moz-transform-style: preserve-3d;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ -webkit-transform-origin: 125px 0;
|
|
|
+ -moz-transform-origin: 125px 0;
|
|
|
+ transform-origin: 125px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 3px;
|
|
|
+ width: 7px;
|
|
|
+ /* 翻页转角处的图片 */
|
|
|
+ background: url(/images/thr.png) repeat-y;
|
|
|
+ z-index: 20;
|
|
|
+ -webkit-transform: translateZ(1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .book:hover {
|
|
|
+ -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
|
|
|
+ -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
|
|
|
+ transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-cover {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-cover img {
|
|
|
+ vertical-align: bottom;
|
|
|
+ max-width: 100%;
|
|
|
+ width: 220px;
|
|
|
+ height: 240px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-spine {
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 50px;
|
|
|
+ z-index: 5;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
|
+ /* 书的侧面图片 */
|
|
|
+ // background: url(/images/two.jpeg) -64px 0 no-repeat;
|
|
|
+ background-size: auto 100%;
|
|
|
+ -webkit-transform: rotateY(-90deg) translateX(-49px);
|
|
|
+ -moz-transform: rotateY(-90deg) translateX(-49px);
|
|
|
+ transform: rotateY(-90deg) translateX(-49px);
|
|
|
+ -webkit-transform-origin: 0 0;
|
|
|
+ -moz-transform-origin: 0 0;
|
|
|
+ transform-origin: 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-spine h1 {
|
|
|
+ display: block;
|
|
|
+ width: 325px;
|
|
|
+ text-align: left;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 39px;
|
|
|
+ text-indent: 43px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ font-family: 'league_gothic_condensedRg', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
+ font-size: 2em;
|
|
|
+ opacity: 0.75;
|
|
|
+ font-weight: normal;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -webkit-transform: rotateZ(90deg);
|
|
|
+ -moz-transform: rotateZ(90deg);
|
|
|
+ transform: rotateZ(90deg);
|
|
|
+ -webkit-transform-origin: 0 0;
|
|
|
+ -moz-transform-origin: 0 0;
|
|
|
+ transform-origin: 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-spine:before {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
width: 100%;
|
|
|
- height: 220px;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
.other {
|
|
|
.title {
|
|
|
@@ -120,99 +304,7 @@ const getfile = (item) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- .right_1 {
|
|
|
- position: relative;
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 220px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 5px;
|
|
|
- width: 100%;
|
|
|
- padding: 0 8px;
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
- background-image: none;
|
|
|
- background-repeat: repeat;
|
|
|
- background-position: 0 0;
|
|
|
- background: -moz-linear-gradient(top, none, none);
|
|
|
- background: -o-linear-gradient(top, none, none);
|
|
|
- background: linear-gradient(top, none, none);
|
|
|
- background: -webkit-gradient(linear, left top, left bottom, from(none), to(none));
|
|
|
- box-sizing: border-box;
|
|
|
- .title {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- font-size: $global-font-size-18;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- font-weight: normal;
|
|
|
- font-style: normal;
|
|
|
- text-decoration: none;
|
|
|
- font-family: Tahoma;
|
|
|
- line-height: 34px;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-text-overflow: ellipsis;
|
|
|
- -moz-text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .right_2 {
|
|
|
- .right_2_1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background: linear-gradient(90deg, #d7e8ff, #fff);
|
|
|
- width: 300px;
|
|
|
- height: 64px;
|
|
|
- padding-left: 21px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 7px;
|
|
|
- .left {
|
|
|
- font-size: $global-font-size-26;
|
|
|
- font-family:
|
|
|
- PingFangSC-Medium,
|
|
|
- PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- .right {
|
|
|
- text-align: right;
|
|
|
- font-size: $global-font-size-18;
|
|
|
- font-family:
|
|
|
- PingFangSC-Regular,
|
|
|
- PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #666;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .content {
|
|
|
- margin: 10px 0 0 0;
|
|
|
- .name {
|
|
|
- max-height: 48px;
|
|
|
- font-size: $global-font-size-18;
|
|
|
- font-family:
|
|
|
- PingFangSC-Medium,
|
|
|
- PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111;
|
|
|
- line-height: 24px;
|
|
|
- display: block;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .name:hover {
|
|
|
- color: #2374ff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
.page {
|
|
|
display: flex;
|
|
|
flex-direction: row-reverse;
|
