|
|
@@ -1,107 +1,106 @@
|
|
|
<template>
|
|
|
<div class="pages--home">
|
|
|
- <div class="top-search-group flex-c-c center">
|
|
|
- <div class="centerBox">
|
|
|
+ <div class="top-search-group flex-c-c center">
|
|
|
+ <div class="centerBox">
|
|
|
<h1>剑鱼文库，上亿级文档资料库</h1>
|
|
|
<search-input @submit="goSubmit" :btnText="in_Iframe?'搜 索':''" :leftIconshow="in_Iframe"></search-input>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="group-content">
|
|
|
+ </div>
|
|
|
<div class="center-contentbox">
|
|
|
<div class="new-group">
|
|
|
- <div class="new-list-group must-bottom">
|
|
|
- <div class="top-list-group">
|
|
|
- <div class="flex-r-c">
|
|
|
- <div class="title-group flex-r-c center left">
|
|
|
- <h5 style="font-size: 24px;line-height: 36px;">热门文档</h5>
|
|
|
- <!-- <i class="el-icon-jy-Frame"></i> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="word-model">
|
|
|
- <div class="word-model-content" :class="{ 'launch-alone': !launchActive }">
|
|
|
- <div class="word-model-list" @click="onSetWordModel(item)" :class="{ 'active': item.active }"
|
|
|
- v-for="(item, index) in wordModel" :key="index">
|
|
|
- {{ item.value }}
|
|
|
+ <div class="new-list-group must-bottom">
|
|
|
+ <div class="top-list-group">
|
|
|
+ <div class="flex-r-c">
|
|
|
+ <div class="title-group flex-r-c center left">
|
|
|
+ <h5 style="font-size: 24px;line-height: 36px;">热门文档</h5>
|
|
|
+ <!-- <i class="el-icon-jy-Frame"></i> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="word-model-more" @click="launchActive = !launchActive">
|
|
|
- <span>{{ launchActive ? '收起' : '展开' }}</span>
|
|
|
- <i :class="`el-icon-arrow-${launchActive ? 'up' : 'down'}`"></i>
|
|
|
+ <div class="word-model">
|
|
|
+ <div class="word-model-content" :class="{'launch-alone': !launchActive}">
|
|
|
+ <div class="word-model-list" @click="onSetWordModel(item)" :class="{'active': item.active}" v-for="(item, index) in wordModel" :key="index">
|
|
|
+ {{item.value}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="word-model-more" @click="launchActive = !launchActive" v-if="canFold">
|
|
|
+ <span>{{ launchActive ? '收起' : '展开'}}</span>
|
|
|
+ <i :class="`el-icon-arrow-${launchActive ? 'up' : 'down'}`"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="word-file-main">
|
|
|
- <div class="word-file-list" @click="goContent(item)" v-for="(item, index) in wordFileList" :key="index">
|
|
|
- <div class="mini-img-group">
|
|
|
- <img :src="item.img" alt="" @error="handleError">
|
|
|
- <i class="word-type" :class="'el-icon-jy-' + item.type"></i>
|
|
|
- <span v-if="item.productType === 1" class="word-vip-mark">会员免费</span>
|
|
|
+ <div class="word-file-main">
|
|
|
+ <div class="word-file-list" @click="goContent(item)" v-for="(item, index) in wordFileList" :key="index">
|
|
|
+ <div class="mini-img-group">
|
|
|
+ <img :src="item.img" alt="" @error="handleError">
|
|
|
+ <i class="word-type" :class="'el-icon-jy-' + item.type" ></i>
|
|
|
+ <span class="type-tag" :class="item.productType === 2 ? 'boutique' : 'free'">{{item.productType === 2 ? '付费精品' : '会员免费'}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="word-file-name">{{ item.title }}</div>
|
|
|
</div>
|
|
|
- <div class="word-file-name">{{ item.title }}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 文库会员广告位 -->
|
|
|
- <div class="word-file-ad" v-if="jyPcDocMember && jyPcDocMember.length" :style="{height: in_Iframe?adHeight:'80px'}">
|
|
|
- <el-carousel :height="in_Iframe?adHeight:'80px'">
|
|
|
- <el-carousel-item v-for="(item, index) in jyPcDocMember" :key="index">
|
|
|
- <img @click.prevent="onDocLink(item)" :src="item.s_pic" :alt="item.s_remark">
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
- <!-- 文库推荐广告位 -->
|
|
|
- <div class="word-recommend-ad" v-if="jyPcDocRecommend && jyPcDocRecommend.length">
|
|
|
- <div class="word-recommend-ad-list" @click.stop="onDocLink(item)" v-for="(item, index) in jyPcDocRecommend"
|
|
|
- :key="index">
|
|
|
- <img :src="item.s_pic" :alt="item.s_remark">
|
|
|
+ </div>
|
|
|
+ <!-- 文库会员广告位 -->
|
|
|
+ <div class="word-file-ad" v-if="jyPcDocMember && jyPcDocMember.length" :style="{height: in_Iframe?adHeight:'80px'}">
|
|
|
+ <el-carousel :height="in_Iframe?adHeight:'80px'">
|
|
|
+ <el-carousel-item v-for="(item, index) in jyPcDocMember" :key="index">
|
|
|
+ <img @click.prevent="onDocLink(item)" :src="item.s_pic" :alt="item.s_remark">
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ <!-- 文库推荐广告位 -->
|
|
|
+ <div class="word-recommend-ad" v-if="jyPcDocRecommend && jyPcDocRecommend.length">
|
|
|
+ <div class="word-recommend-ad-list" @click.stop="onDocLink(item)" v-for="(item, index) in jyPcDocRecommend" :key="index">
|
|
|
+ <img :src="item.s_pic" :alt="item.s_remark">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="hot-down-group">
|
|
|
- <div class="flex-r-c">
|
|
|
- <div class="title-group flex-r-c center left">
|
|
|
- <h5>会员免费文档</h5>
|
|
|
- <i class="el-icon-jy-Frame-1"></i>
|
|
|
+ <div class="flex-r-c">
|
|
|
+ <div class="title-group flex-r-c center left">
|
|
|
+ <h5>会员免费文档</h5>
|
|
|
+ <i class="el-icon-jy-Frame-1"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="new-list-group flex-r-c">
|
|
|
- <div class="flex flex-c-c">
|
|
|
- <div class="list-item flex-r-c" v-for="item in hotList1" :key="item.id" @click="goContent(item)">
|
|
|
- <div class="flex flex-r-c center left">
|
|
|
- <i :class="'el-icon-jy-' + item.type" />
|
|
|
- <div class="flex">
|
|
|
- <div class="van-ellipsis">{{ item.title }}</div>
|
|
|
+ <div class="new-list-group flex-r-c">
|
|
|
+ <div class="flex flex-c-c">
|
|
|
+ <div class="list-item flex-r-c" v-for="item in hotList1" :key="item.id" @click="goContent(item)">
|
|
|
+ <div class="flex flex-r-c center left">
|
|
|
+ <i :class="'el-icon-jy-' + item.type" />
|
|
|
+ <div class="flex">
|
|
|
+ <div class="van-ellipsis">{{item.title}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="right-info flex-r-c center right">
|
|
|
- <!-- <i class="el-icon-jy-iconJianYu" />
|
|
|
+ <div class="right-info flex-r-c center right">
|
|
|
+ <!-- <i class="el-icon-jy-iconJianYu" />
|
|
|
<span>{{item.money}}</span> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="flex flex-c-c">
|
|
|
- <div class="list-item flex-r-c" v-for="item in hotList2" :key="item.id" @click="goContent(item)">
|
|
|
- <div class="flex flex-r-c center left">
|
|
|
- <i :class="'el-icon-jy-' + item.type" />
|
|
|
- <div class="flex">
|
|
|
- <div class="van-ellipsis">{{ item.title }}</div>
|
|
|
+ <div class="flex flex-c-c">
|
|
|
+ <div class="list-item flex-r-c" v-for="item in hotList2" :key="item.id" @click="goContent(item)">
|
|
|
+ <div class="flex flex-r-c center left">
|
|
|
+ <i :class="'el-icon-jy-' + item.type" />
|
|
|
+ <div class="flex">
|
|
|
+ <div class="van-ellipsis">{{item.title}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="right-info flex-r-c center right">
|
|
|
- <!-- <i class="el-icon-jy-iconJianYu" />
|
|
|
+ <div class="right-info flex-r-c center right">
|
|
|
+ <!-- <i class="el-icon-jy-iconJianYu" />
|
|
|
<span>{{item.money}}</span> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="bottom-group">
|
|
|
- <selected-recommend :options="pageData.keep" @click="goContent"></selected-recommend>
|
|
|
+ <selected-recommend
|
|
|
+ :options="pageData.keep"
|
|
|
+ @click="goContent"
|
|
|
+ ></selected-recommend>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -181,6 +180,7 @@ export default {
|
|
|
jyPcDocMember: [], // 文库会员广告位
|
|
|
docsWordList: [],
|
|
|
launchActive: false,
|
|
|
+ canFold: false,
|
|
|
in_Iframe: false
|
|
|
}
|
|
|
},
|
|
|
@@ -228,6 +228,22 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 热门文档的tag是否有多行
|
|
|
+ checkIsOneRow () {
|
|
|
+ const container = document.querySelector('.word-model-content')
|
|
|
+ if (!container) return
|
|
|
+ const items = container.querySelectorAll('.word-model-list')
|
|
|
+ // 获取所有子元素的top值,如果所有子元素的top值相同,则说明只有一行
|
|
|
+ const firstItemTop = items[0].offsetTop
|
|
|
+ let isOneRow = true
|
|
|
+ for (let i = 1; i < items.length; i++) {
|
|
|
+ if (items[i].offsetTop !== firstItemTop) {
|
|
|
+ isOneRow = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.canFold = !isOneRow
|
|
|
+ },
|
|
|
handleError (img) {
|
|
|
img.target.src = require('../assets/images/error.png')
|
|
|
},
|
|
|
@@ -331,7 +347,10 @@ export default {
|
|
|
getSearchTag().then(data => {
|
|
|
const res = data.data
|
|
|
if (res && res.error_code === 0) {
|
|
|
- this.wordModel = res.data.map((item, index) => ({ value: item, active: index === 0 }))
|
|
|
+ this.wordModel = res.data.map((item, index) => ({ value: item, active: index === 0 ? true : false }))
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.checkIsOneRow()
|
|
|
+ })
|
|
|
const localList = this.getLocalData(this.wordModel[0].value)
|
|
|
if (localList && localList.length) {
|
|
|
this.wordFileList = localList.map((v) => formatData(v))
|
|
|
@@ -382,15 +401,15 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-.page--docs--index.view_index {
|
|
|
- .page-container {
|
|
|
- background-image: url("~@/assets/images/wenkuBanner.png");
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-color: #fff;
|
|
|
- background-size: 100% 310px;
|
|
|
+ .page--docs--index.view_index {
|
|
|
+ .page-container {
|
|
|
+ background-image: url("~@/assets/images/wenkuBanner.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-color: #fff;
|
|
|
+ background-size: 100% 310px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.page--docs--index.view_index.in-iframe {
|
|
|
+ .page--docs--index.view_index.in-iframe {
|
|
|
.page-container {
|
|
|
background:rgb(242, 242, 244) !important;
|
|
|
background-image: none;
|
|
|
@@ -398,409 +417,370 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped lang="scss">
|
|
|
-.pages--home {
|
|
|
- padding-bottom: 40px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- @include diy-icon('iconJianYu', 24, 24);
|
|
|
-
|
|
|
- @include diy-icon('pdf', 24);
|
|
|
- @include diy-icon('word', 24);
|
|
|
- @include diy-icon('excel', 24);
|
|
|
- @include diy-icon('ppt', 24);
|
|
|
- @include diy-icon('txt', 24);
|
|
|
-
|
|
|
- .group-content {
|
|
|
- padding-top: 1px;
|
|
|
- }
|
|
|
- .center-contentbox{
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .list-item {
|
|
|
- cursor: pointer;
|
|
|
- padding: 18px 0;
|
|
|
+ .pages--home {
|
|
|
+ padding-bottom: 40px;
|
|
|
box-sizing: border-box;
|
|
|
- border-bottom: 1px solid #ececec;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: #2CB7CA;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom-color: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- i {
|
|
|
- flex-shrink: 0;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .flex {
|
|
|
- min-width: 0;
|
|
|
- }
|
|
|
+ @include diy-icon('iconJianYu', 24, 24);
|
|
|
|
|
|
- .right-info {
|
|
|
- margin-left: 4px;
|
|
|
- flex-shrink: 0;
|
|
|
- color: #1D1D1D;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-size: 16px;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
+ @include diy-icon('pdf', 24);
|
|
|
+ @include diy-icon('word', 24);
|
|
|
+ @include diy-icon('excel', 24);
|
|
|
+ @include diy-icon('ppt', 24);
|
|
|
+ @include diy-icon('txt', 24);
|
|
|
+ .center-contentbox{
|
|
|
+ padding-top: 1px;
|
|
|
+ margin: auto;
|
|
|
}
|
|
|
-
|
|
|
- .card-item {
|
|
|
- cursor: pointer;
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 8px 16px 12px 0;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- .title-text {
|
|
|
- color: #2ABED1;
|
|
|
+ .list-item {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 18px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #ececec;
|
|
|
+ &:hover {
|
|
|
+ color: #2CB7CA;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .money-group {
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .mini-img-group {
|
|
|
- flex-shrink: 0;
|
|
|
- position: relative;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #ececec;
|
|
|
- width: 100px;
|
|
|
- height: 124px;
|
|
|
- margin-right: 12px;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom-color: transparent;
|
|
|
}
|
|
|
|
|
|
i {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .flex {
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+ .right-info {
|
|
|
+ margin-left: 4px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #1D1D1D;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
}
|
|
|
+ .card-item {
|
|
|
+ cursor: pointer;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 8px 16px 12px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .info-text-group {
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
+ &:hover {
|
|
|
+ .title-text {
|
|
|
+ color: #2ABED1;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:last-child {
|
|
|
+ .money-group {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .mini-img-group {
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ width: 100px;
|
|
|
+ height: 124px;
|
|
|
+ margin-right: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-text-group {
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ &:last-child {
|
|
|
+ &::after {
|
|
|
+ content: unset;
|
|
|
+ }
|
|
|
+ }
|
|
|
&::after {
|
|
|
- content: unset;
|
|
|
+ content: "|";
|
|
|
+ padding: 0 8px;
|
|
|
+ color: #ececec;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "|";
|
|
|
- padding: 0 8px;
|
|
|
- color: #ececec;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .info-text {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .red-text {
|
|
|
+ color: #FF3A20;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .title-text {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #1D1D1D;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .info-text {
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-style: normal;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 24px;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .red-text {
|
|
|
- color: #FF3A20;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-style: normal;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 18px;
|
|
|
- line-height: 28px;
|
|
|
- }
|
|
|
-
|
|
|
- .title-text {
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-style: normal;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- color: #1D1D1D;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .van-ellipsis {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .van-multi-ellipsis--l2 {
|
|
|
- display: -webkit-box;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .hot-keep-group {
|
|
|
- .card-item {
|
|
|
- width: 279px;
|
|
|
+ .van-ellipsis {
|
|
|
overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-@include diy-icon('search', 24);
|
|
|
-@include diy-icon('Frame', 24);
|
|
|
-@include diy-icon('Frame-1', 24);
|
|
|
-
|
|
|
-.new-group {
|
|
|
- margin-top: 54px;
|
|
|
|
|
|
- .flex-c-c {
|
|
|
- padding-right: 24px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .van-multi-ellipsis--l2 {
|
|
|
+ display: -webkit-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
|
|
- &+.flex-c-c {
|
|
|
- padding-right: 0;
|
|
|
- padding-left: 24px;
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.hot-down-group {
|
|
|
- border-radius: 12px;
|
|
|
- background: radial-gradient(circle at 50% 50%, #FAEACD 0%, #FFF8EA 100%);
|
|
|
- background-image: url("~@/assets/images/dateGetBg.png");
|
|
|
- background-repeat: no-repeat;
|
|
|
-
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- padding: 24px;
|
|
|
- padding-bottom: 34px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-top: 40px;
|
|
|
|
|
|
- .title-group h5 {
|
|
|
- color: #863700;
|
|
|
- }
|
|
|
-
|
|
|
- .new-list-group {
|
|
|
- background-color: white;
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
- .flex-c-c {
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .hot-keep-group {
|
|
|
+ .card-item {
|
|
|
+ width: 279px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.title-group {
|
|
|
- margin-bottom: 16px;
|
|
|
-
|
|
|
- h5 {
|
|
|
- color: #1D1D1D;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 28px;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: left;
|
|
|
- margin-right: 9px;
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.top-search-group {
|
|
|
- width: 100%;
|
|
|
- height: 246px;
|
|
|
- background-color: transparent;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- h1 {
|
|
|
- color: #1D1D1D;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 300;
|
|
|
- font-size: 40px;
|
|
|
- line-height: normal;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: center;
|
|
|
- margin: 42px 0 24px;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.new-list-group {
|
|
|
- .word-file-main {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .word-file-list {
|
|
|
- margin-left: 16px;
|
|
|
- width: 136px;
|
|
|
- height: 240px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- margin-left: 0;
|
|
|
+ @include diy-icon('search', 24);
|
|
|
+ @include diy-icon('Frame', 24);
|
|
|
+ @include diy-icon('Frame-1', 24);
|
|
|
+
|
|
|
+ .new-group {
|
|
|
+ margin-top: 54px;
|
|
|
+ .flex-c-c {
|
|
|
+ padding-right: 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ & + .flex-c-c {
|
|
|
+ padding-right: 0;
|
|
|
+ padding-left: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .mini-img-group {
|
|
|
- position: relative;
|
|
|
+ .hot-down-group {
|
|
|
+ border-radius: 12px;
|
|
|
+ background: radial-gradient(circle at 50% 50%, #FAEACD 0%, #FFF8EA 100%);
|
|
|
+ background-image: url("~@/assets/images/dateGetBg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
|
- .word-type {
|
|
|
- position: absolute;
|
|
|
- right: 4px;
|
|
|
- bottom: 2px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 24px;
|
|
|
+ padding-bottom: 34px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 40px;
|
|
|
+
|
|
|
+ .title-group h5 {
|
|
|
+ color: #863700;
|
|
|
}
|
|
|
|
|
|
- .word-vip-mark {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- padding: 2px 5px;
|
|
|
- font-size: 11px;
|
|
|
- line-height: 14px;
|
|
|
- color: #fff;
|
|
|
- border-radius: 4px 0px 9px 0px;
|
|
|
- background: linear-gradient(to right, #FF7C32 0%, #F33838 100%);
|
|
|
+ .new-list-group {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ .flex-c-c {
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &>img {
|
|
|
- width: 100%;
|
|
|
- height: 184px;
|
|
|
- border: 1px solid #ECECEC;
|
|
|
- border-radius: 4px;
|
|
|
+ .title-group {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ h5 {
|
|
|
+ color: #1D1D1D;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 28px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-right: 9px;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .word-file-name {
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- /* 控制显示的行数 */
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- margin-top: 8px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- word-break: break-all;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
+ .top-search-group {
|
|
|
+ width: 100%;
|
|
|
+ height: 246px;
|
|
|
+ background-color: transparent;
|
|
|
+ h1 {
|
|
|
color: #1D1D1D;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 40px;
|
|
|
+ line-height: normal;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 42px 0 24px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .word-file-ad {
|
|
|
- margin-top: 20px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .el-carousel {
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
|
|
|
- ::v-deep {
|
|
|
- .el-carousel__indicator {
|
|
|
- padding: 10px;
|
|
|
+ .new-list-group {
|
|
|
+ .word-file-main{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-top: 10px;
|
|
|
+ .word-file-list{
|
|
|
+ margin-left: 16px;
|
|
|
+ width: 136px;
|
|
|
+ height: 240px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ .mini-img-group{
|
|
|
+ position: relative;
|
|
|
+ .word-type {
|
|
|
+ position: absolute;
|
|
|
+ right: 4px;
|
|
|
+ bottom: 2px;
|
|
|
+ }
|
|
|
+ &>img{
|
|
|
+ width: 100%;
|
|
|
+ height: 184px;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .type-tag {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ padding: 2px 5px;
|
|
|
+ border-radius: 4px 0px 9px 0px;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 14px;
|
|
|
+
|
|
|
+ &.free {
|
|
|
+ background: linear-gradient(to right, #FF7C32 0%, #F33838 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ &.boutique{
|
|
|
+ background: linear-gradient(270deg, #F1D090 0%, #FAE7CA 100%);
|
|
|
+ color: #B1700E;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .word-file-name{
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2; /* 控制显示的行数 */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ margin-top: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .el-carousel__button {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
+ }
|
|
|
+ .word-file-ad {
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ .el-carousel{
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ ::v-deep{
|
|
|
+ .el-carousel__indicator {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .el-carousel__button{
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .word-recommend-ad {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 20px;
|
|
|
- height: 160px;
|
|
|
-
|
|
|
- .word-recommend-ad-list {
|
|
|
- width: 285px;
|
|
|
- height: 100%;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- &>img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .word-recommend-ad{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 160px;
|
|
|
+ .word-recommend-ad-list{
|
|
|
+ width: 285px;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ &>img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .word-model {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .word-model-content {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .word-model-list {
|
|
|
- margin: 0 10px 10px 0;
|
|
|
- padding: 2px 8px;
|
|
|
- color: #686868;
|
|
|
- font-size: 14px;
|
|
|
- border-radius: 4px;
|
|
|
- line-height: 22px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: #2ABED1;
|
|
|
- color: #fff;
|
|
|
+ .word-model {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .word-model-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .word-model-list {
|
|
|
+ margin:0 10px 10px 0;
|
|
|
+ padding: 2px 8px;
|
|
|
+ color: #686868;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 22px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active{
|
|
|
+ background: #2ABED1;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.launch-alone{
|
|
|
+ height: 26px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .word-model-more{
|
|
|
+ width: 44px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- &.launch-alone {
|
|
|
- height: 26px;
|
|
|
- overflow: hidden;
|
|
|
+ > .flex {
|
|
|
+ max-width: 50%;
|
|
|
+ }
|
|
|
+ &.must-bottom {
|
|
|
+ .list-item:last-child {
|
|
|
+ border-bottom-color: #ececec;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .word-model-more {
|
|
|
- width: 44px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: #1D1D1D;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- >.flex {
|
|
|
- max-width: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- &.must-bottom {
|
|
|
- .list-item:last-child {
|
|
|
- border-bottom-color: #ececec;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.in-app {
|
|
|
+ .in-app {
|
|
|
.word-file-list{
|
|
|
height: auto;
|
|
|
}
|
wenmenghao