You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
388 lines
7.3 KiB
388 lines
7.3 KiB
<template>
|
|
<view class="content">
|
|
<!-- 列表 -->
|
|
<view class="artic">
|
|
<view class="justy">
|
|
<view class="rdlist" v-for="(item,ind) in readlists" :key="ind"
|
|
@click="togglePopup(item, 'image')">
|
|
<view class="justy-type">
|
|
<view class="rdlist-img">
|
|
<image :src="item.localCover"
|
|
mode="scaleToFill" class="listimg"></image>
|
|
</view>
|
|
<view class="rdlist-name">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 插屏弹窗 -->
|
|
<uni-popup ref="image" :custom="true" :mask-click="true" >
|
|
<view class="tc-image">
|
|
<view class="x">
|
|
<image class="background" src="../../static/img/yuewen_03.png" mode="" />
|
|
<view class="tcartic">
|
|
<view class="tctitle">人工智能的终极探索</view>
|
|
<view class="container">
|
|
<view class="" v-if="ifShow" >
|
|
<view class="qrimg-i">
|
|
<tki-qrcode
|
|
ref="qrcode"
|
|
:val="val"
|
|
:size="size"
|
|
:unit="unit"
|
|
:background="background"
|
|
:foreground="foreground"
|
|
:pdground="pdground"
|
|
:icon="icon"
|
|
:iconSize="iconsize"
|
|
:lv="lv"
|
|
:onval="onval"
|
|
:loadMake="loadMake"
|
|
:usingComponents="true"
|
|
@result="qrR" />
|
|
</view>
|
|
</view>
|
|
<view class="saoma">扫码免费阅读本文</view>
|
|
</view>
|
|
<view class="tcfoot">
|
|
<view class="ewm">
|
|
<view class="ewmimg">
|
|
<image :src="listcont.localCover" mode="" class="ewmimage"></image>
|
|
</view>
|
|
<view class="cpgroup">
|
|
<view class="cptit">标题：{{listcont.name}}</view>
|
|
<view class="cpauter">作者：{{listcont.creator}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="tcjj">{{listcont.desc}}</view>
|
|
<view class="out" @click="cancel('image')" >
|
|
<image src="../../static/img/yuewen_06.png" class="outto"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {LocalData, getStorage,serialNum} from '@/utils/global.js'
|
|
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
|
import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
|
|
export default {
|
|
components: {
|
|
uniPagination,
|
|
uniPopup,
|
|
tkiQrcode
|
|
},
|
|
props:{
|
|
readlists: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 弹窗
|
|
ifShow: true,
|
|
val: '', // 要生成的二维码值
|
|
size: 125, // 二维码大小
|
|
unit: 'upx', // 单位
|
|
background: '#ffffff', // 背景色
|
|
foreground: '#000000', // 前景色
|
|
pdground: '#000000', // 角标色
|
|
icon: '', // 二维码图标
|
|
iconsize: 40, // 二维码图标大小
|
|
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
|
onval: false, // val值变化时自动重新生成二维码
|
|
loadMake: false, // 组件加载完成后自动生成二维码
|
|
src: '' ,// 二维码生成后的图片地址或base64
|
|
listcont:'' //简介
|
|
}
|
|
},
|
|
methods: {
|
|
qrR(res) {
|
|
this.src = res
|
|
// console.log(res)
|
|
},
|
|
togglePopup(item,open) {
|
|
console.log(item)
|
|
this.listcont=item
|
|
this.ifShow = false
|
|
this.loadMake = false
|
|
this.$refs[open].open()
|
|
let that=this
|
|
this.$nextTick(function(){
|
|
that.ifShow = true
|
|
that.loadMake = true
|
|
})
|
|
let h5ReaderUrl=uni.getStorageSync('h5ReaderUrl')
|
|
this.val=h5ReaderUrl+"?name=read&sn="+serialNum+"&id="+item.resourceId
|
|
console.log("196-",this.val)
|
|
},
|
|
cancel(type) {
|
|
this.$refs[type].close()
|
|
},
|
|
},
|
|
onLoad(e) {
|
|
getStorage()
|
|
this.togglePopup(this.readlists, 'image')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
/* height: 1335upx; */
|
|
background: rgb(0,21,52);
|
|
color: white;
|
|
}
|
|
.unihead-title{
|
|
width: 100%;
|
|
height: 120upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 34upx 8%;
|
|
}
|
|
.title{
|
|
width: 50%;
|
|
margin-top: 13upx;
|
|
font-size: 34upx;
|
|
font-weight: 600;
|
|
}
|
|
.unihead-right{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.icon-item{
|
|
width: 11%;
|
|
min-width: 102upx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.help{
|
|
margin-left: 10upx;
|
|
line-height: 90upx;
|
|
font-size: 0.5rem;
|
|
}
|
|
.iconhelp{
|
|
margin-top: 30upx;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
}
|
|
.helps{
|
|
background: url(../../static/img/help.png) no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.home{
|
|
background: url(../../static/img/home.png) no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.back{
|
|
background: url(../../static/img/back.png) no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.artic{
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
height: 1015upx;
|
|
margin-top: 10upx;
|
|
}
|
|
.justy{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 6%;
|
|
margin-top: 20upx;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
.justy-type{
|
|
width: 83%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 6upx 0;
|
|
background: url(../../static/img/yuewen2_03.png) no-repeat;
|
|
background-size:100% 100%;
|
|
|
|
}
|
|
.rdlist{
|
|
width: 25%;
|
|
height: 176upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 28upx;
|
|
/* background-color: red; */
|
|
}
|
|
.rdlist-img{
|
|
width: 90%;
|
|
height: 80%;
|
|
border-radius: 2upx;
|
|
}
|
|
.listimg{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.rdlist-name{
|
|
width: 95%;
|
|
height: 50upx;
|
|
margin-left:5upx;
|
|
font-size: 0.5rem;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
/* 分页 */
|
|
.example-body{
|
|
height: 200upx;
|
|
padding: 70upx 2%;
|
|
box-sizing: border-box;
|
|
}
|
|
/* 插屏广告 */
|
|
uni-popup{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.content>>>.uni-popup__wrapper.center{
|
|
align-items: flex-start;
|
|
}
|
|
.tc-image {
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
|
|
.tc-image .background {
|
|
width: 600upx;
|
|
height: 800upx;
|
|
}
|
|
.x{
|
|
position: relative;
|
|
}
|
|
.tcartic{
|
|
position: absolute;
|
|
top: 12%;
|
|
left: 0;
|
|
padding: 0 70upx;
|
|
}
|
|
.tctitle{
|
|
font-weight: 700;
|
|
font-size: 0.8rem;
|
|
padding-bottom: 4upx;
|
|
margin-bottom: 30upx;
|
|
border-bottom: 2px solid rgb(2,68,106);
|
|
}
|
|
.container{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.tki-qrcode{
|
|
display: inline-block;
|
|
padding: 5upx;
|
|
text-align: center;
|
|
background: white;
|
|
font-size: 0;
|
|
}
|
|
.saoma{
|
|
font-size: 0.5rem;
|
|
}
|
|
.qrimg-i{
|
|
padding: 4upx;
|
|
}
|
|
.uni-image-close {
|
|
position: absolute;
|
|
right: -30px;
|
|
top: -30px;
|
|
z-index: 2;
|
|
}
|
|
.tcfoot{
|
|
margin-top: 30upx;
|
|
box-sizing: border-box;
|
|
padding: 30upx;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
border: 1px solid rgb(19,96,125) ;
|
|
}
|
|
.ewm{
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
.ewmimg{
|
|
width: 132upx;
|
|
height: 132upx;
|
|
background: url(../../static/img/yuewen_10.png) no-repeat;
|
|
background-size:100% ;
|
|
margin-right: 16upx;
|
|
padding: 10upx;
|
|
}
|
|
.cpgroup{
|
|
width: 70%;
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
}
|
|
.cptit,.cpauter{
|
|
font-size: 0.5rem;
|
|
}
|
|
.ewmimage{
|
|
width: 100%;
|
|
height: 91%;
|
|
}
|
|
.tcjj{
|
|
font-size: 0.4rem;
|
|
height: 120upx;
|
|
overflow: hidden;
|
|
/* background: #007AFF; */
|
|
}
|
|
.out{
|
|
width: 30upx;
|
|
height: 30upx;
|
|
position: absolute;
|
|
top: -20upx;
|
|
right: 80upx;
|
|
}
|
|
.outto{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.leftbutton{
|
|
width: 5%;
|
|
height: 200upx;
|
|
position: fixed;
|
|
top:40%;
|
|
left:0;
|
|
}
|
|
.leftbutton image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.rightbutton{
|
|
width: 5%;
|
|
height: 200upx;
|
|
position: fixed;
|
|
top:40%;
|
|
right:0;
|
|
}
|
|
.rightbutton image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|