|
|
@@ -1,35 +1,466 @@
|
|
|
<template>
|
|
|
- <div class="home">
|
|
|
- <el-button @click="getTest" :loading="fullscreenLoading" type="primary">模拟Ajax</el-button>
|
|
|
- <el-button @click="getLoginStatus" type="info">获取登录状态</el-button>
|
|
|
+ <div class="c-details">
|
|
|
+ <div class="d-left">
|
|
|
+ <div class="tops">
|
|
|
+ <h3>
|
|
|
+ <i class="el-icon-jy-word"></i>
|
|
|
+ 优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料
|
|
|
+ </h3>
|
|
|
+ <div class="tips">
|
|
|
+ <ul>
|
|
|
+ <li class="tags" v-for="(item,index) in datas" :key="index">{{item.name}}</li>
|
|
|
+ <li>11222次浏览<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li>222次下载<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li>共13页<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li>22k<el-divider direction="vertical"></el-divider></li>
|
|
|
+ <li class="no-line">2021-02-23上传</li>
|
|
|
+ </ul>
|
|
|
+ <div class="coin"><span>200</span>剑鱼币</div>
|
|
|
+ </div>
|
|
|
+ <div class="buyed" v-if="buyed">您已兑换过该文档，可直接下载</div>
|
|
|
+ <div class="buyed no-buyed" v-else>剑鱼币余额不足，现有 50 剑鱼币，还需 150 剑鱼币，请先充值</div>
|
|
|
+ <div class="load-doc">
|
|
|
+ <el-button type="primary">下载文档</el-button>
|
|
|
+ <div class="icons">
|
|
|
+ <el-tooltip placement="bottom" effect="light" popper-class="f-share">
|
|
|
+ <span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
|
|
|
+ <div slot="content">
|
|
|
+ <img src="../assets/images/wechat.png" width="110" height="108">
|
|
|
+ <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <span class="spa1 spa2" @click="collectd=!collectd"><i :class="collectd?'el-icon-jy-weiguanzhu':'el-icon-jy-guanzhu'"></i>收藏</span>
|
|
|
+ <el-tooltip content="如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉" placement="top" effect="dark">
|
|
|
+ <span class="spa1"><i class="el-icon-jy-jubao"></i>投诉举报</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middles">
|
|
|
+ <h3>摘要</h3>
|
|
|
+ <p>优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要。</p>
|
|
|
+ <div class="continue" v-show="!buyed">全文共18页，<span @click="continued">继续阅读<i class="el-icon-arrow-down"></i></span></div>
|
|
|
+ </div>
|
|
|
+ <div class="bottoms" id="colWidth" v-show="buyed">
|
|
|
+ <div class="page">
|
|
|
+ <div class="head-tip" id="fixedCard" :class="{'is-fixed':fixed}">
|
|
|
+ <h3 v-show="fixed">
|
|
|
+ <i class="el-icon-jy-word"></i>
|
|
|
+ <span>优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料</span>
|
|
|
+ </h3>
|
|
|
+ <span><i>1</i> / 8</span>
|
|
|
+ </div>
|
|
|
+ <div class="cont-p"></div>
|
|
|
+ </div>
|
|
|
+ <div class="foot-tip tops">
|
|
|
+ <div class="load-doc">
|
|
|
+ <div class="icons">
|
|
|
+ <el-tooltip placement="bottom" effect="light" popper-class="f-share">
|
|
|
+ <span class="spa1"><i class="el-icon-jy-share"></i>分享</span>
|
|
|
+ <div slot="content">
|
|
|
+ <img src="../assets/images/wechat.png" width="110" height="108">
|
|
|
+ <p style="color: #686868;font-size: 14px;text-align:center;">微信扫码分享</p>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <span class="spa1 spa2" @click="collectd=!collectd"><i :class="collectd?'el-icon-jy-weiguanzhu':'el-icon-jy-guanzhu'"></i>收藏</span>
|
|
|
+ <el-tooltip content="如果您发现此内容有侵权行为，请联系客服400-108-6670进行投诉" placement="top" effect="dark">
|
|
|
+ <span class="spa1"><i class="el-icon-jy-jubao"></i>投诉举报</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary">下载文档</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d-right">
|
|
|
+ <div class="r-tops">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="r-bott">
|
|
|
+ <h3>相关推荐</h3>
|
|
|
+ <div class="docs">
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="../assets/images/123.png" alt="">
|
|
|
+ <i class="el-icon-jy-word"></i>
|
|
|
+ </div>
|
|
|
+ <div class="conts">
|
|
|
+ <h5>优化招投标市场营商环境与国企采购人主体优化招投标市场营商环境与国企采购人主体</h5>
|
|
|
+ <p>贡献者：刘梅里</p>
|
|
|
+ <div class="d-tip">
|
|
|
+ <p>2022次下载</p>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <p>共18页</p>
|
|
|
+ <el-divider direction="vertical"></el-divider>
|
|
|
+ <p>220k</p>
|
|
|
+ </div>
|
|
|
+ <div class="r-coin">500剑鱼币</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { ajaxGetTest } from '../api/modules/user'
|
|
|
-import { Button } from 'element-ui'
|
|
|
-
|
|
|
+import { Button, Tooltip, Divider } from 'element-ui'
|
|
|
export default {
|
|
|
- name: 'home',
|
|
|
components: {
|
|
|
- [Button.name]: Button
|
|
|
+ [Button.name]: Button,
|
|
|
+ [Tooltip.name]: Tooltip,
|
|
|
+ [Divider.name]: Divider
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- fullscreenLoading: false
|
|
|
+ datas: [{ name: '招标' }, { name: '培训' }],
|
|
|
+ buyed: true,
|
|
|
+ collectd: true,
|
|
|
+ offsetTop: 0,
|
|
|
+ offsetWidth: 0,
|
|
|
+ colWidth: 0,
|
|
|
+ fixed: false
|
|
|
}
|
|
|
},
|
|
|
+ mounted () {
|
|
|
+ // 监听滚轮
|
|
|
+ window.addEventListener('scroll', this.initHeight)
|
|
|
+ this.setTop()
|
|
|
+ },
|
|
|
+ destroyed () { // 移除监听
|
|
|
+ window.removeEventListener('scroll', this.initHeight)
|
|
|
+ },
|
|
|
methods: {
|
|
|
- getTest () {
|
|
|
- this.fullscreenLoading = true
|
|
|
- ajaxGetTest().then(res => {
|
|
|
- console.log(res)
|
|
|
- this.fullscreenLoading = false
|
|
|
+ setTop () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 获取到达页面顶端的值
|
|
|
+ const height = document.getElementById('fixedCard')
|
|
|
+ this.offsetTop = height.offsetTop
|
|
|
+ console.log(this.offsetTop)
|
|
|
})
|
|
|
},
|
|
|
- getLoginStatus: function () {
|
|
|
- alert(loginflag)
|
|
|
+ initHeight () {
|
|
|
+ // 获取页面滚动距离
|
|
|
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
|
|
+ // 判断滚动距离是否大于元素到顶端距离
|
|
|
+ this.fixed = scrollTop > this.offsetTop && this.buyed ? true : false
|
|
|
+ },
|
|
|
+ continued () {
|
|
|
+ // this.buyed = !this.buyed;
|
|
|
+ // this.setTop();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@include diy-icon('share', 18);
|
|
|
+@include diy-icon('jubao', 18);
|
|
|
+@include diy-icon('weiguanzhu', 18);
|
|
|
+@include diy-icon('guanzhu', 18);
|
|
|
+@include diy-icon('word', 24);
|
|
|
+
|
|
|
+.c-details {
|
|
|
+ width: 1200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: initial;
|
|
|
+ margin: 32px auto;
|
|
|
+ padding-bottom: 60px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ .d-left {
|
|
|
+ width: 920px;
|
|
|
+ .tops {
|
|
|
+ // min-height: 224px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 32px 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ h3 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #1d1d1d;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 36px;
|
|
|
+ i {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12px 0;
|
|
|
+ margin-top: 8px;
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: initial;
|
|
|
+ align-items: center;
|
|
|
+ li {
|
|
|
+ list-style-type: none;
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ width: 40px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(44, 167, 227, 0.08);
|
|
|
+ color: #2cb7ca;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ li:not(.tags, .coin) {
|
|
|
+ color: #686868;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .no-line {
|
|
|
+ border-right: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coin {
|
|
|
+ span {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ color: rgba(44,183,202,1);
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buyed {
|
|
|
+ height: 24px;
|
|
|
+ color: #2CB7CA;
|
|
|
+ background: rgba(44,183,202,0.05);
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 10px 0 8px 0;
|
|
|
+ }
|
|
|
+ .no-buyed {
|
|
|
+ background: rgba(255,58,32,0.05)!important;
|
|
|
+ color: rgb(255,58,32)!important;
|
|
|
+ }
|
|
|
+ .load-doc {
|
|
|
+ height: 52px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .el-button {
|
|
|
+ width: 132px;
|
|
|
+ height: 36px;
|
|
|
+ padding: 7px 34px 8px 34px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #2CB7CA;
|
|
|
+ border-color: #2CB7CA;
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icons {
|
|
|
+ color: rgba(104,104,104,1);
|
|
|
+ font-size: 14px;
|
|
|
+ span {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .spa2 {
|
|
|
+ margin-left: 16px;
|
|
|
+ margin-right: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .spa1 {
|
|
|
+ i {
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middles {
|
|
|
+ padding: 24px 40px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 16px 0;
|
|
|
+ h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 28px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ color: #686868;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .continue {
|
|
|
+ color: #686868;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 36px;
|
|
|
+ span {
|
|
|
+ color: #2CB7CA;
|
|
|
+ cursor: pointer;
|
|
|
+ i {
|
|
|
+ margin-left: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottoms {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .page {
|
|
|
+ .head-tip {
|
|
|
+ width: 840px;
|
|
|
+ height: 42px;
|
|
|
+ background: #fcfcfc;
|
|
|
+ // filter:alpha(opacity=80); //IE
|
|
|
+ // opacity: 0.8; //Chrome
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 40px;
|
|
|
+ border-bottom: 1px solid #F2F2F4;
|
|
|
+ h3 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ width: 700px;
|
|
|
+ color: #686868;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #686868;
|
|
|
+ font-size: 14px;
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ font-style: normal;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .is-fixed {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .cont-p {
|
|
|
+ height: 1248px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 24px 40px 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .foot-tip {
|
|
|
+ height: 56px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 28px 0px rgba(0,0,0,0.08);
|
|
|
+ padding: 0 40px;
|
|
|
+ .load-doc {
|
|
|
+ height: 100%;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .spa2 {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ margin-left: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .d-right {
|
|
|
+ width: 264px;
|
|
|
+ margin-left: 16px;
|
|
|
+ .r-tops {
|
|
|
+ min-height: 456px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #c4c4c4;
|
|
|
+ }
|
|
|
+ .r-bott {
|
|
|
+ min-height: 448px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 15px 12px;
|
|
|
+ h3 {
|
|
|
+ color: #686868;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ }
|
|
|
+ .docs {
|
|
|
+ display: flex;
|
|
|
+ .imgs {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ img {
|
|
|
+ width: 78px;
|
|
|
+ height: 112px;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conts {
|
|
|
+ margin-left: 8px;
|
|
|
+ h5 {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp:2;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .d-tip {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: initial;
|
|
|
+ align-items: center;
|
|
|
+ .el-divider--vertical {
|
|
|
+ height: 0.8em;
|
|
|
+ margin: 0 2px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ padding: 0 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .r-coin {
|
|
|
+ color: #2CB7CA;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xgwangman
