Skip to content

C
CPPC
提交 576f65cd authored 作者: 王腾飞's avatar 王腾飞
浏览文件
操作

1125

上级 d71c27cd
隐藏空白字符变更
内嵌 并排
正在显示 包含 2503 行增加 和 1 行删除
.history/pages/details/article_20201117143701.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="article_page">
<view class="searchHeader">
<view class="backImgBox" @click="goBack()">
<image src=../../static/back.png mode="" class="back"></image>
</view>
<view class="ipt">阅读</view>
</view>
<view class="title">
<h6>{{articleData.name}}</h6>
<view class="readNum">
<text class="time">2019-07-24 21:04:47 </text>
<text class="source">来源：{{articleData.source}}</text>
<text class="read">阅读量：{{articleData.browseNum}}</text>
</view>
</view>
<view class="articleCon" v-html="articleData.text"></view>
</view>
</template>
<script>
import {getArticleAPI } from '../../api/index.js';
export default {
data() {
return {
id:'',
articleData:{}
}
},
onLoad(option) {
this.id=option.id
this.getDetail()
},
methods: {
goBack(){
uni.navigateBack({
delta: 1
});
},
getDetail(){
console.log(777)
getArticleAPI(this.id).then( res => {
if(res.data.code==0){
this.articleData=res.data.data;
}
})
}
}
}
</script>
<style lang="less" scoped>
.article_page{
.searchHeader{
padding: 16upx 30upx 10upx 24upx;
display: flex;
align-items: center;
height: 68upx;
background: url('../../static/banner.png') no-repeat;
background-size: 100%;
.backImgBox{
height: 100%;
}
.back{
height: 38upx;
width: 21upx;
margin-right: 27upx;
vertical-align: middle;
margin-top: 6upx;
}
.ipt{
height: 68upx;
width: 574upx;
color: white;
text-align: center;
line-height: 68upx;
font-size: 18px;
margin-right: 18upx;
}
.search{
height: 38upx;
width: 38upx;
}
}
.title{
margin: 58upx 32upx 0;
border-bottom: 1px solid #E6E6E6;
h6{
font-size: 20px;
}
.readNum{
margin: 46upx 0 32upx;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #C8CAD2;
}
.read{
color: #F55827;
}
}
.articleCon{
padding: 48upx 34upx;
color: #333;
text-indent: 32upx;
font-size: 16px;
}
}
</style>
.history/pages/details/article_20201118091502.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="article_page">
<view class="searchHeader">
<view class="backImgBox" @click="goBack()">
<image src=../../static/back.png mode="" class="back"></image>
</view>
<view class="ipt">阅读1</view>
</view>
<view class="title">
<h6>{{articleData.name}}</h6>
<view class="readNum">
<text class="time">2019-07-24 21:04:47 </text>
<text class="source">来源：{{articleData.source}}</text>
<text class="read">阅读量：{{articleData.browseNum}}</text>
</view>
</view>
<view class="articleCon" v-html="articleData.text"></view>
</view>
</template>
<script>
import {getArticleAPI } from '../../api/index.js';
export default {
data() {
return {
id:'',
articleData:{}
}
},
onLoad(option) {
this.id=option.id
this.getDetail()
},
methods: {
goBack(){
uni.navigateBack({
delta: 1
});
},
getDetail(){
console.log(777)
getArticleAPI(this.id).then( res => {
if(res.data.code==0){
this.articleData=res.data.data;
}
})
}
}
}
</script>
<style lang="less" scoped>
.article_page{
.searchHeader{
padding: 16upx 30upx 10upx 24upx;
display: flex;
align-items: center;
height: 68upx;
background: url('../../static/banner.png') no-repeat;
background-size: 100%;
.backImgBox{
height: 100%;
}
.back{
height: 38upx;
width: 21upx;
margin-right: 27upx;
vertical-align: middle;
margin-top: 6upx;
}
.ipt{
height: 68upx;
width: 574upx;
color: white;
text-align: center;
line-height: 68upx;
font-size: 18px;
margin-right: 18upx;
}
.search{
height: 38upx;
width: 38upx;
}
}
.title{
margin: 58upx 32upx 0;
border-bottom: 1px solid #E6E6E6;
h6{
font-size: 20px;
}
.readNum{
margin: 46upx 0 32upx;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #C8CAD2;
}
.read{
color: #F55827;
}
}
.articleCon{
padding: 48upx 34upx;
color: #333;
text-indent: 32upx;
font-size: 16px;
}
}
</style>
.history/pages/details/article_20201118091507.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="article_page">
<view class="searchHeader">
<view class="backImgBox" @click="goBack()">
<image src=../../static/back.png mode="" class="back"></image>
</view>
<view class="ipt">阅读</view>
</view>
<view class="title">
<h6>{{articleData.name}}</h6>
<view class="readNum">
<text class="time">2019-07-24 21:04:47 </text>
<text class="source">来源：{{articleData.source}}</text>
<text class="read">阅读量：{{articleData.browseNum}}</text>
</view>
</view>
<view class="articleCon" v-html="articleData.text"></view>
</view>
</template>
<script>
import {getArticleAPI } from '../../api/index.js';
export default {
data() {
return {
id:'',
articleData:{}
}
},
onLoad(option) {
this.id=option.id
this.getDetail()
},
methods: {
goBack(){
uni.navigateBack({
delta: 1
});
},
getDetail(){
console.log(777)
getArticleAPI(this.id).then( res => {
if(res.data.code==0){
this.articleData=res.data.data;
}
})
}
}
}
</script>
<style lang="less" scoped>
.article_page{
.searchHeader{
padding: 16upx 30upx 10upx 24upx;
display: flex;
align-items: center;
height: 68upx;
background: url('../../static/banner.png') no-repeat;
background-size: 100%;
.backImgBox{
height: 100%;
}
.back{
height: 38upx;
width: 21upx;
margin-right: 27upx;
vertical-align: middle;
margin-top: 6upx;
}
.ipt{
height: 68upx;
width: 574upx;
color: white;
text-align: center;
line-height: 68upx;
font-size: 18px;
margin-right: 18upx;
}
.search{
height: 38upx;
width: 38upx;
}
}
.title{
margin: 58upx 32upx 0;
border-bottom: 1px solid #E6E6E6;
h6{
font-size: 20px;
}
.readNum{
margin: 46upx 0 32upx;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #C8CAD2;
}
.read{
color: #F55827;
}
}
.articleCon{
padding: 48upx 34upx;
color: #333;
text-indent: 32upx;
font-size: 16px;
}
}
</style>
.history/pages/index/index_20201117143701.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="content">
<view class="header">
<image class="logo" src="../../static/logo.png" mode=""></image>
<image class="search" @click="toSearch()" src="../../static/search.png" mode=""></image>
</view>
<view class="uni-tab-bar11">
<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
<view v-for="(tab,index) in subjectList" :key="index" :class="['swiper-tab-list',siteCode==index ? 'active' : '']"
:id="index" :data-current="index" @click="tapTab(tab,index)">
<view class="wordCont">{{tab.name}}</view>
<view :class="[siteCode==index ? 'borderBtm' : '']"></view>
</view>
</scroll-view>
</view>
<view class="newArrival">
<view class="titBox">
<view class="tit_l">
<image src="../../static/tit.png" mode=""></image>
<text>最新上架</text>
</view>
<view class="tit_r" @click="getMore(0)">
<text>查看更多</text>
<image src="../../static/arrow.png" mode=""></image>
</view>
</view>
<view class="managizeIntro" v-if="news">
<view class="imgBox" @click="readBook(news.id)">
<image v-if="news.bookCover" :src="fileUrl(news.bookCover)" mode=""></image>
<image v-else src="../../static/news.png" mode=""></image>
</view>
<view class="wordBox">
<view class="title" @click="readBook(news.id)">
{{news.name}}
</view>
<view class="intro" @click="readBook(news.id)">
【本期导读】{{news.summary}}
</view>
<view class="readBtn" @click="readBook(news.id)">
<image src="../../static/read.png" mode=""></image>
<text>立即阅读</text>
</view>
</view>
</view>
</view>
<view class="managizeList">
<view :class="['olist',index%3!=2?'marginR':'']" @click="readBook(item.id)" v-for="(item,index) in bookList" :key="index">
<view class="imgs">
<image v-if="item.bookCover" :src=fileUrl(item.bookCover) mode=""></image>
<image v-else src="../../static/list.png" mode=""></image>
</view>
<view class="txt">{{item.name}}</view>
</view>
</view>
<view class="toUpdate">
<view class="tit">
<image src="../../static/tit.png" mode=""></image>
<text>正版杂志 持续更新</text>
</view>
<view class="olist" v-if="stageList.length>0">
<view :class="['list',index%2!=1?'marginR':'']" @click="getMore(index,item.yearId)" v-for="(item,index) in stageList" :key="index">{{item.name}}年刊</view>
<view class='list' @click="getMore(0)">查看更多>></view>
</view>
</view>
</view>
</template>
<script>
import {getSubjectAPI,getNewsAPI,getYearAPI } from '../../api/index.js';
export default {
data() {
return {
scrollLeft: 0,
siteCode:0,
subjectList:[],
subjectId:'',
bookList:[],
stageList:[],
news:null,
year:''
}
},
onLoad() {
this.getSubject()
},
methods: {
//切换杂志主体
tapTab(tab,index){
this.siteCode=index;
this.subjectId=tab.id;
this.getNewsBook();
this.getYear();
},
//跳到检索页
toSearch(){
uni.navigateTo({
url: '../search/index'
});
},
getMore(index,year){
if(year){
this.year=year
}else{
this.year=this.stageList[0].yearId
}
uni.navigateTo({
url: '../search/yearList?subjectId='+this.subjectId+'&index='+index+'&year='+this.year
});
},
//立即阅读
readBook(id){
uni.navigateTo({
url: '../details/index?id='+id
});
},
//获取杂志主体
getSubject(){
getSubjectAPI().then(res=>{
if(res.data.code==0){
this.subjectList=res.data.data;
if(res.data.data&&res.data.data.length>0){
this.subjectId=res.data.data[0].id
this.getNewsBook();
this.getYear();
}
}
})
},
//最新上架
getNewsBook(){
getNewsAPI(this.subjectId).then(res=>{
if(res.data.code==0){
if(res.data.data.bookList&&res.data.data.bookList.length>0){
this.news=res.data.data.bookList[0]
res.data.data.bookList.shift()
this.bookList=res.data.data.bookList
}else{
this.bookList=[]
this.news=null
}
}
})
},
//根据主体获取年份
getYear(){
getYearAPI(this.subjectId).then(res=>{
if(res.data.code==0){
if(res.data.data.length>0){
console.log(res.data.data)
this.stageList=res.data.data.slice(0,3); //截取数组，只取前三个
this.year=res.data.data[0].yearId;
}else{
this.stageList=[]
}
}else{
this.stageList=[]
}
})
}
}
}
</script>
<style lang="less" scoped>
.header{
height: 160upx;
background: url(../../static/banner.png) no-repeat;
background-size: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 28upx 0 34upx;
.logo{
height: 52upx;
width: 160upx;
}
.search{
height: 38upx;
width: 38upx;
}
}
.uni-tab-bar11 {
height: 100upx;
overflow: hidden;
background: white;
border-bottom: 1px solid #eeeeee;
.uni-swiper-tab {
line-height: 100upx;
height: 100upx;
.swiper-tab-list {
width: auto !important;
padding: 0 40upx;
color: #666666;
font-size: 28upx;
.wordCont {
margin-bottom: 4upx;
}
}
.active {
width: auto !important;
padding: 0 20upx;
color: #DB1115 !important;
font-size: 36upx;
opacity: 1;
font-weight: bold;
}
.borderBtm {
height: 8upx;
width: 50upx;
background: #DB1115;
border-radius: 10upx;
margin-top: 12upx;
margin: 10upx auto;
}
}
}
.newArrival{
margin: 0 24upx;
padding: 50upx 0 40upx;
border-bottom: 1px solid #eee;
.titBox{
display: flex;
justify-content: space-between;
margin-bottom: 50upx;
}
.tit_l{
image{
height: 34upx;
width: 8upx;
margin-right: 20upx;
vertical-align: middle;
}
color: #333;
font-size: 16px;
font-weight: bold;
}
.tit_r{
font-size: 14px;
color: #888888;
image{
height: 20upx;
width: 12upx;
margin-left: 20upx;
}
}
.managizeIntro{
display: flex;
.imgBox{
image{
height: 336upx;
width: 250upx;
}
margin-right: 30upx;
}
.title{
color: #212020;
font-size: 16px;
margin-bottom: 32upx;
font-weight: bold;
}
.intro{
font-size: 14px;
color: #555;
margin-bottom: 49upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.readBtn{
height: 52upx;
width: 230upx;
border-radius: 26upx;
background: #FFA331;
color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
image{
height: 26upx;
width: 30upx;
margin-right: 12upx;
}
}
}
}
.managizeList{
padding: 40upx 24upx 50upx;
border-bottom: 8px solid #eee;
display: flex;
flex-wrap: wrap;
.olist{
width: 196upx;
margin-bottom: 50upx;
}
.marginR{
margin-right: 52upx;
}
image{
height: 264upx;
width: 196upx;
margin-bottom: 30upx;
}
.txt{
text-align: center;
color: #202021;
font-size: 12px;
}
}
.toUpdate{
padding: 50upx 24upx 28upx;
.tit{
margin-bottom: 50upx;
image{
height: 34upx;
width: 8upx;
margin-right: 12upx;
vertical-align: middle;
}
text{
font-size: 16px;
color: #333333;
font-weight: bold;
}
}
.olist{
display: flex;
flex-wrap: wrap;
}
.list{
height: 110upx;
width: 338upx;
background: url(../../static/stage.png) no-repeat;
background-size: 100%;
text-align: center;
line-height: 110upx;
color: #333;
margin-bottom: 24upx;
}
.marginR{
margin-right: 26upx;
}
}
</style>
.history/pages/index/index_20201118144725.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="content">
<view class="header">
<image class="logo" src="../../static/logo.png" mode=""></image>
<image class="search" @click="toSearch()" src="../../static/search.png" mode=""></image>
</view>
<view class="uni-tab-bar11">
<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
<view v-for="(tab,index) in subjectList" :key="index" :class="['swiper-tab-list',siteCode==index ? 'active' : '']"
:id="index" :data-current="index" @click="tapTab(tab,index)">
<view class="wordCont">{{tab.name}}</view>
<view :class="[siteCode==index ? 'borderBtm' : '']"></view>
</view>
</scroll-view>
</view>
<view class="newArrival">
<view class="titBox">
<view class="tit_l">
<image src="../../static/tit.png" mode=""></image>
<text>最新上架</text>
</view>
<view class="tit_r" @click="getMore(0)">
<text>查看更多</text>
<image src="../../static/arrow.png" mode=""></image>
</view>
</view>
<view class="managizeIntro" v-if="news">
<view class="imgBox" @click="readBook(news.id)">
<image v-if="news.bookCover" :src="fileUrl(news.bookCover)" mode=""></image>
<image v-else src="../../static/news.png" mode=""></image>
</view>
<view class="wordBox">
<view class="title" @click="readBook(news.id)">
{{news.name}}
</view>
<view class="intro" @click="readBook(news.id)">
【本期导读】{{news.summary}}
</view>
<view class="readBtn" @click="readBook(news.id)">
<image src="../../static/read.png" mode=""></image>
<text>立即阅读</text>
</view>
</view>
</view>
</view>
<view class="managizeList">
<view :class="['olist',index%3!=2?'marginR':'']" @click="readBook(item.id)" v-for="(item,index) in bookList" :key="index">
<view class="imgs">
<image v-if="item.bookCover" :src=fileUrl(item.bookCover) mode=""></image>
<image v-else src="../../static/list.png" mode=""></image>
</view>
<view class="txt">{{item.name}}</view>
</view>
</view>
<view class="toUpdate">
<view class="tit">
<image src="../../static/tit.png" mode=""></image>
<text>正版杂志 持续更新</text>
</view>
<view class="olist" v-if="stageList.length>0">
<view :class="['list',index%2!=1?'marginR':'']" @click="getMore(index,item.yearId)" v-for="(item,index) in stageList" :key="index">{{item.name}}年刊</view>
<view class='list' @click="getMore(0)">查看更多>></view>
</view>
</view>
</view>
</template>
<script>
import {getSubjectAPI,getNewsAPI,getYearAPI } from '../../api/index.js';
export default {
data() {
return {
scrollLeft: 0,
siteCode:0,
subjectList:[],
subjectId:'',
bookList:[],
stageList:[],
news:null,
year:''
}
},
onLoad() {
this.getSubject()
},
methods: {
//切换杂志主体
tapTab(tab,index){
this.siteCode=index;
this.subjectId=tab.id;
this.getNewsBook();
this.getYear();
},
//跳到检索页
toSearch(){
uni.navigateTo({
url: '../search/index'
});
},
getMore(index,year){
if(year){
this.year=year
}else{
this.year=this.stageList[0].yearId
}
uni.navigateTo({
url: '../search/yearList?subjectId='+this.subjectId+'&index='+index+'&year='+this.year
});
},
//立即阅读
readBook(id){
uni.navigateTo({
url: '../details/index?id='+id
});
},
//获取杂志主体
getSubject(){
getSubjectAPI().then(res=>{
if(res.data.code==0){
this.subjectList=res.data.data;
if(res.data.data&&res.data.data.length>0){
this.subjectId=res.data.data[0].id
this.getNewsBook();
this.getYear();
}
}
})
},
//最新上架
getNewsBook(){
getNewsAPI(this.subjectId).then(res=>{
if(res.data.code==0){
if(res.data.data.bookList&&res.data.data.bookList.length>0){
this.news=res.data.data.bookList[0]
res.data.data.bookList.shift()
this.bookList=res.data.data.bookList
}else{
this.bookList=[]
this.news=null
}
}
})
},
//根据主体获取年份
getYear(){
getYearAPI(this.subjectId).then(res=>{
if(res.data.code==0){
if(res.data.data.length>0){
console.log(res.data.data)
this.stageList=res.data.data.slice(0,3); //截取数组，只取前三个
this.year=res.data.data[0].yearId;
}else{
this.stageList=[]
}
}else{
this.stageList=[]
}
})
}
}
}
</script>
<style lang="less" scoped>
.header{
height: 160upx;
background: url(../../static/banner.png) no-repeat;
background-size: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 28upx 0 34upx;
.logo{
height: 52upx;
width: 160upx;
}
.search{
height: 38upx;
width: 38upx;
}
}
.uni-tab-bar11 {
height: 100upx;
overflow: hidden;
background: white;
border-bottom: 1px solid #eeeeee;
.uni-swiper-tab {
line-height: 100upx;
height: 100upx;
.swiper-tab-list {
width: auto !important;
padding: 0 40upx;
color: #666666;
font-size: 28upx;
.wordCont {
margin-bottom: 4upx;
}
}
.active {
width: auto !important;
padding: 0 20upx;
color: #DB1115 !important;
font-size: 36upx;
opacity: 1;
font-weight: bold;
}
.borderBtm {
height: 8upx;
width: 50upx;
background: #DB1115;
border-radius: 10upx;
margin-top: 12upx;
margin: 10upx auto;
}
}
}
.newArrival{
margin: 0 24upx;
padding: 50upx 0 40upx;
border-bottom: 1px solid #eee;
.titBox{
display: flex;
justify-content: space-between;
margin-bottom: 50upx;
}
.tit_l{
image{
height: 34upx;
width: 8upx;
margin-right: 20upx;
vertical-align: middle;
}
color: #333;
font-size: 16px;
font-weight: bold;
}
.tit_r{
font-size: 14px;
color: #888888;
image{
height: 20upx;
width: 12upx;
margin-left: 20upx;
}
}
.managizeIntro{
display: flex;
.imgBox{
image{
height: 336upx;
width: 250upx;
}
margin-right: 30upx;
}
.title{
color: #212020;
font-size: 16px;
margin-bottom: 32upx;
font-weight: bold;
}
.intro{
font-size: 14px;
color: #555;
margin-bottom: 49upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.readBtn{
height: 52upx;
width: 230upx;
border-radius: 26upx;
background: #FFA331;
color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
image{
height: 26upx;
width: 30upx;
margin-right: 12upx;
}
}
}
}
.managizeList{
padding: 40upx 24upx 50upx;
border-bottom: 8px solid #eee;
display: flex;
flex-wrap: wrap;
.olist{
width: 196upx;
margin-bottom: 50upx;
}
.marginR{
margin-right: 52upx;
}
image{
height: 264upx;
width: 196upx;
margin-bottom: 30upx;
}
.txt{
text-align: center;
color: #202021;
font-size: 12px;
}
}
.toUpdate{
padding: 50upx 24upx 28upx;
.tit{
margin-bottom: 50upx;
image{
height: 34upx;
width: 8upx;
margin-right: 12upx;
vertical-align: middle;
}
text{
font-size: 16px;
color: #333333;
font-weight: bold;
}
}
.olist{
display: flex;
flex-wrap: wrap;
}
.list{
height: 110upx;
width: 338upx;
background: url(../../static/stage.png) no-repeat;
background-size: 100%;
text-align: center;
line-height: 110upx;
color: #333;
margin-bottom: 24upx;
}
.marginR{
margin-right: 26upx;
}
}
</style>
.history/pages_20201118092600.json 0 → 100644
浏览文件 @ 576f65cd
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/newIndex/index"
},
{
"path": "pages/index/index"
},
{
"path": "pages/search/index"
},
{
"path": "pages/search/list"
},
{
"path": "pages/search/yearList"
},
{
"path": "pages/details/index"
},
{
"path": "pages/details/article"
}
],
"globalStyle": {
"navigationStyle":"custom"
}
}
.history/pages_20201118092949.json 0 → 100644
浏览文件 @ 576f65cd
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/newIndex/index"
},
{
"path": "pages/index/index"
},
{
"path": "pages/search/index"
},
{
"path": "pages/search/list"
},
{
"path": "pages/search/yearList"
},
{
"path": "pages/details/index"
},
{
"path": "pages/details/article"
}
],
"globalStyle": {
"navigationStyle":"custom"
}
}
.history/pages_20201118093001.json 0 → 100644
浏览文件 @ 576f65cd
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/newIndex/index"
},
{
"path": "pages/index/index"
},
{
"path": "pages/search/index"
},
{
"path": "pages/search/list"
},
{
"path": "pages/search/yearList"
},
{
"path": "pages/details/index"
},
{
"path": "pages/details/article"
}
],
"globalStyle": {
"navigationStyle":"custom"
}
}
.history/pages_20201118093425.json 0 → 100644
浏览文件 @ 576f65cd
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index"
},
{
"path": "pages/newIndex/newIndex"
},
{
"path": "pages/search/index"
},
{
"path": "pages/search/list"
},
{
"path": "pages/search/yearList"
},
{
"path": "pages/details/index"
},
{
"path": "pages/details/article"
}
],
"globalStyle": {
"navigationStyle":"custom"
}
}
components/free-audio/free-audio.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<!-- 音频播放器组件 -->
<view v-if='url' class='flex justify-between align-center audio'>
<view class='mr-3' @click='start'>
<image :src='startPic' class='icon' v-show='!status'></image>
<image :src='endPic' class='icon' v-show='status'></image>
</view>
<view class='flex-1'>
<slider @change='changeAudio' :activeColor='activeColor' :min='0' :max='duration.toFixed(0)' :value='currentTime.toFixed(0)' :step='0.1'></slider>
</view>
<view class='ml-3'>{{getTime(Math.round(currentTime))}}</view>
</view>
</template>
<script>
export default {
data() {
return {
context: null,
currentTime: 0,
duration: 100,
status: false
}
},
props: {
url: String,
activeColor: {
type: String,
default: '#0E7EFC'
},
startPic: String,
endPic: String
},
created() {
this.context = uni.createInnerAudioContext();
this.context.src = this.url;
this.onTimeUpdate();
this.onCanplay();
this.onEnded();
},
methods: {
start() { //点击播放
if(this.status) {
this.context.pause();
this.status = !this.status;
}else {
this.context.play()
this.status = !this.status;
}
},
onCanplay() { //进入可播放状态
this.context.onCanplay(() => {
this.context.duration;
setTimeout(()=>{
this.duration = this.context.duration;
},1000)
})
},
onTimeUpdate() { //音频播放进度
this.context.onTimeUpdate(() => {
this.currentTime = this.context.currentTime;
})
},
onEnded() { //播放结束
this.context.onEnded(()=> {
this.status = false;
this.currentTime = 0;
})
},
changeAudio(e) {
this.context.seek(e.detail.value)
},
getTime(time) {
let m = parseInt(time / 60);
let s = time % 60;
return this.towNum(m) + ':' + this.towNum(s);
},
towNum(num) {
if(num >= 10) {
return num;
}else {
return '0' + num;
}
}
}
}
</script>
<style>
.audio {
background: #F4F4F4;
padding: 20rpx;
}
.icon {
width: 80rpx;
height: 80rpx;
}
</style>
components/hans-tabbar/hans-tabbar.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="weui-tabbar" :class="extClass">
<!-- 选中的时候往weui-tabbar__item加class:weui-bar__item_on -->
<view @click="tabChange(index)" v-for="(item, index) in list" :key="index" class="weui-tabbar__item" :class="{'weui-bar__item_on':index === current}">
<view style="position: relative;display:inline-block;"><image :src="current === index ? item.selectedIconPath : item.iconPath" class="weui-tabbar__icon"></image></view>
<view class="weui-tabbar__label">{{ item.text }}</view>
</view>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
extClass: '',
current: 0
};
},
methods: {
tabChange(index) {
if (index === this.current) {
return;
}
this.current = index;
this.$emit('tabChange',index)
}
}
};
</script>
<style lang="scss" scoped >
.weui-tabbar {
display: flex;
position: relative;
z-index: 500;
background-color: #ffffff;
height: 98upx;
uni-view {
line-height: 1;
}
}
.weui-tabbar:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.1);
}
.weui-tabbar__item {
display: block;
flex: 1;
padding: 13upx 0 11px;
padding-bottom: calc(8px + constant(safe-area-inset-bottom));
padding-bottom: calc(8px + env(safe-area-inset-bottom));
font-size: 0;
color: rgba(0, 0, 0, 0.5);
text-align: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.weui-tabbar__item:first-child {
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
}
.weui-tabbar__item:last-child {
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
color: #DD1718;
}
.weui-tabbar__icon {
display: inline-block;
width: 34upx;
height: 40upx;
}
i.weui-tabbar__icon,
.weui-tabbar__icon > i {
font-size: 24px;
color: rgba(0, 0, 0, 0.5);
}
.weui-tabbar__icon image {
width: 100%;
height: 100%;
}
.weui-tabbar__label {
color: #bfbfbf;
font-size: 10px;
line-height: 1.4;
margin-top: 8upx;
}
</style>
pages.json
浏览文件 @ 576f65cd
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/microIndex/microIndex"
},
{
"path": "pages/video/video"
},
{
"path": "pages/audio/audio"
},
{
"path": "pages/articalPage/articalPage"
},
{
"path": "pages/topicDetail/topicDetail"
},
{
"path": "pages/topic/topic"
},
{
"path": "pages/newIndex/newIndex"
},
{
"path": "pages/index/index"
},
{
......@@ -18,7 +39,6 @@
{
"path": "pages/details/article"
}
],
"globalStyle": {
"navigationStyle":"custom"
......
pages/articalPage/articalPage.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="articalBox">
<view class="listCon">
<dl>
<dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt>
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
<dl>
<!-- <dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt> -->
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.articalBox {
width: 100%;
height: 100%;
.listCon {
width: 100%;
box-sizing: border-box;
padding: 0 30upx;
margin-top: 55upx;
dl {
width: 100%;
border-bottom: 1px solid #EEEEEE;
display: flex;
flex-direction: row-reverse;
padding: 40upx 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border: none;
}
dt {
width: 200upx;
height: 134upx;
border-radius: 10upx;
image {
width: 100%;
height: 100%;
}
}
dd {
flex: 1;
line-height: 1;
margin-inline-start: 0px;
ul {
margin-top: -10upx;
padding-inline-start: 0px;
li {
list-style: none;
}
.topicTitle {
color: #222222;
font-size: 30upx;
line-height: 48upx;
}
.videoPicCon {
width: 100%;
height: 388upx;
position: relative;
margin-top: 30upx;
image:nth-of-type(1) {
width: 100%;
height: 100%;
}
image:nth-of-type(2) {
width: 96upx;
height: 96upx;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
.uploadTimer {
margin-top: 29upx;
span {
color: #A8ACB4;
font-size: 24upx;
&:nth-of-type(1) {
margin-right: 30upx;
}
}
}
}
}
}
}
}
</style>
pages/audio/audio.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="audioDetailBox">
<view class="audioCon">
<free-audio startPic='../../static/icon_detail_bofang.png' endPic='../../static/delete.png' :url='path'></free-audio>
</view>
<view class="aduioRelations">
<h2>习近平主席在第三届中国国际进口博览会开幕式上的主旨演讲传递信心与力量</h2>
<text class="source">来源：中国政协</text>
<view class="TimerAndPlayerNum">
<text>发布时间：2020-08-26</text>
<text>播放次数：500次</text>
</view>
</view>
<view class="synopsis">
<h3>简介</h3>
<p>11月4日，习近平主席在第三届中国国际进口博览会开幕式上发表主旨演讲，再次向世界展示了中国推动高水平开放的坚定决心和战略定力，再次向世界表明了中国致力于与各国互利共赢的不变初心和不懈追求，让与会代表和参展商受鼓舞、有信心、添动力。
“习近平主席提出的共同开放，体现着中国致力于推动全球化朝着更加包容的方向发展。”南非总统拉马福萨在致辞中如是表示。
“习近平主席的主旨演讲传递了新时代中国深化改革开放、推动合作共赢的强烈信号，彰显了中国推动建设开放型世界经济、携手共创美好未来的智慧与担当。”强生全球资深副总裁、中国区主席宋为群表示。</p>
</view>
</view>
</template>
<script>
import freeAudio from '../../components/free-audio/free-audio.vue'
export default {
components: {
freeAudio
},
data() {
return {
path: '../../static/xgd.mp3'
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.audioDetailBox {
width: 100%;
background: #f2f2f2;
.audioCon {
width: 100%;
}
.aduioRelations {
width: 100%;
height: 100%;
line-height: 1;
box-sizing: border-box;
padding: 33upx 30upx 50upx;
background: #FFFFFF;
border-radius: 0 0 14upx 14upx;
h2 {
color: #3D3D3D;
font-size: 34upx;
font-weight: bold;
line-height: 48upx;
}
.source {
color: #FFAF5A;
display: block;
font-size: 24upx;
margin: 16upx auto 26upx;
}
.TimerAndPlayerNum {
color: #999999;
font-size: 20upx;
display: flex;
justify-content: space-between;
}
}
.synopsis {
width: 100%;
background: #FFFFFF;
box-sizing: border-box;
padding: 0 30upx;
margin-top: 20upx;
border-radius: 14upx 14upx 0 0;
line-height: 1;
padding-top: 50upx;
h3 {
color: #333333;
font-size: 30upx;
margin-bottom: 38upx;
}
p {
color: #666666;
font-size: 28upx;
line-height: 48upx;
text-indent: 2em;
}
}
}
</style>
pages/microIndex/microIndex.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="microIndexBox">
<view class="topBanner">
<image src="../../static/topBanner.png" mode=""></image>
</view>
<view class="listCon">
<dl>
<dt>
<image src="../../static/54ee75366dab20f8831607.png" mode=""></image>
</dt>
<dd>政协70周年</dd>
</dl>
<dl>
<dt>
<image src="../../static/54ee75366dab20f8831607.png" mode=""></image>
</dt>
<dd>政协70周年</dd>
</dl>
<dl>
<dt>
<image src="../../static/54ee75366dab20f8831607.png" mode=""></image>
</dt>
<dd>政协70周年</dd>
</dl>
<dl>
<dt>
<image src="../../static/54ee75366dab20f8831607.png" mode=""></image>
</dt>
<dd>政协70周年</dd>
</dl>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="less" scoped>
.microIndexBox {
width: 100%;
.topBanner {
width: 100%;
height: 310upx;
image {
width: 100%;
height: 100%;
}
}
.listCon {
width: 100%;
box-sizing: border-box;
padding: 0 30upx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
line-height: 1;
dl {
width: 180upx;
margin-top: 70upx;
dt {
width: 100%;
height: 180upx;
image {
width: 100%;
height: 100%;
}
}
dd {
width: 100%;
text-align: center;
margin-top: 29upx;
}
}
}
}
</style>
pages/newIndex/newIndex.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="indexBox">
<view class="indexTop">
<image class="logo" src="../../static/logo.png" mode=""></image>
<image class="search" @click="toSearch()" src="../../static/search.png" mode=""></image>
</view>
<view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="newMagazineBox">
<view class="top">
<image src="../../static/magazinePic.png" mode=""></image>
<span>更多</span>
</view>
<view class="magazineList">
<dl>
<dt>
<image src="../../static/pic-b.png" mode=""></image>
</dt>
<dd>2019年第十期</dd>
</dl>
</view>
</view>
<view class="topicBox">
<view class="top">
<image src="../../static/topicPic.png" mode="" style="width: 79upx;"></image>
<span>更多</span>
</view>
<view class="topicList">
<dl>
<dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt>
<dd>政协第十三届主席会议</dd>
</dl>
</view>
</view>
<view class="articalBox">
<view class="top">
<image src="../../static/articalpic.png" mode=""></image>
<span>更多</span>
</view>
<view class="articalList">
<dl>
<dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt>
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
<dl>
<!-- <dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt> -->
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
<dl>
<!-- <dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt> -->
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="videoPicCon">
<image src="../../static/swiperPic.png" mode=""></image>
<image src="../../static/icon_detail_bofang.png" mode=""></image>
</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
</view>
</view>
<hans-tabber :list="list" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange"></hans-tabber>
</view>
</template>
<script>
import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
export default {
components:{
hansTabber
},
data() {
return {
background: ['color1', 'color2', 'color3'],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
list: [
{
"text": "首页",
"iconPath": '../../static/icon-shouye.png' ,
"selectedIconPath": '../../static/icon-shouye_select.png'
},
{
"text": "杂志",
"iconPath": '../../static/icon-zazhi.png',
"selectedIconPath":'../../static/icon-zazhi_select.png'
},
{
"text": "专题",
"iconPath": '../../static/icon-zhuanti.png',
"selectedIconPath": '../../static/icon-zhuanti_select.png'
},
{
"text": "精选",
"iconPath": '../../static/icon-jingxuan.png',
"selectedIconPath": '../../static/icon-jingxuan_select.png'
},
],
}
},
methods: {
tabChange(index) {
console.log(index)
}
}
}
</script>
<style lang="less" scoped>
.indexBox {
width: 100%;
height: 100%;
background: #f2f2f2;
padding-top: 75upx;
}
.indexTop{
height: 70upx;
width: 100%;
background: url(../../static/banner.png) no-repeat;
background-size: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 29upx 0 58upx;
position: fixed;
top: 0;
left: 0;
z-index: 1;
box-sizing: border-box;
.logo{
height: 52upx;
width: 160upx;
margin: 0 auto;
}
.search{
height: 38upx;
width: 38upx;
}
}
.uni-padding-wrap {
width: 100%;
height: 380upx;
box-sizing: border-box;
padding: 30upx 30upx 0;
background: #FFFFFF;
uni-view {
width: 100%;
height: 100%;
border-radius: 20upx;
uni-swiper {
width: 100%;
height: 100%;
border-radius: 20upx;
.uni-swiper-slides {
border-radius: 20upx;
uni-swiper-item {
border-radius: 20upx;
}
}
}
}
}
.newMagazineBox {
width: 100%;
background: #FFFFFF;
padding: 58upx 0 50upx 0;
border-radius: 0px 0px 14px 14px;
}
.top {
width: 100%;
padding: 0 30upx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin-bottom: 50upx;
image {
width: 157upx;
height: 39upx;
}
span {
color: #999999;
font-size: 26upx;
background: url(../../static/arrow.png) no-repeat;
background-size: 12upx 20upx;
background-position: 58upx 14upx;
width: 68upx;
}
}
.magazineList {
width: 100%;
box-sizing: border-box;
padding: 0 30upx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
dl {
width: 190upx;
dt {
width: 100%;
height: 266upx;
image {
width: 100%;
height: 100%;
}
}
dd {
width: 100%;
text-align: center;
color: #333333;
font-size: 26upx;
line-height: 1;
margin-top: 29upx;
}
}
}
.topicBox {
width: 100%;
background: #FFFFFF;
margin-top: 20upx;
padding: 49upx 0;
border-radius: 14px 14px 0 0;
.topicList {
width: 100%;
padding: 0 30upx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
box-sizing: border-box;
dl {
width: 330upx;
dt {
width: 100%;
height: 220upx;
image {
width: 100%;
height: 100%;
}
}
dd {
width: 100%;
text-align: center;
line-height: 1;
margin-top: 30upx;
}
}
}
}
.articalBox {
width: 100%;
background: #FFFFFF;
margin-top: 20upx;
padding: 50upx 0 158upx 0;
box-sizing: border-box;
.articalList {
width: 100%;
box-sizing: border-box;
padding: 0 30upx;
dl {
width: 100%;
border-bottom: 1px solid #EEEEEE;
display: flex;
flex-direction: row-reverse;
padding: 40upx 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border: none;
}
dt {
width: 200upx;
height: 134upx;
border-radius: 10upx;
image {
width: 100%;
height: 100%;
}
}
dd {
flex: 1;
line-height: 1;
margin-inline-start: 0px;
ul {
margin-top: -10upx;
padding-inline-start: 0px;
li {
list-style: none;
}
.topicTitle {
color: #222222;
font-size: 30upx;
line-height: 48upx;
}
.videoPicCon {
width: 100%;
height: 388upx;
position: relative;
margin-top: 30upx;
image:nth-of-type(1) {
width: 100%;
height: 100%;
}
image:nth-of-type(2) {
width: 96upx;
height: 96upx;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
.uploadTimer {
margin-top: 29upx;
span {
color: #A8ACB4;
font-size: 24upx;
&:nth-of-type(1) {
margin-right: 30upx;
}
}
}
}
}
}
}
}
</style>
pages/topic/topic.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="topicBox">
<view class="topBanner">
<image src="../../static/topBanner.png" mode=""></image>
</view>
<view class="toppicList">
<uni-load-more status="loading" v-if="isShowLoad"></uni-load-more>
<mescroll-uni v-else @down="downCallback" @up="upCallback" @init="mescrollInit">
<dl class="itemCon">
<dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt>
<dd>全新风貌再现百年历史</dd>
</dl>
<dl class="itemCon">
<dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt>
<dd>全新风貌再现百年历史</dd>
</dl>
<dl class="itemCon">
<dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt>
<dd>全新风貌再现百年历史</dd>
</dl>
<view class="" v-if="showLoading"></view>
</mescroll-uni>
</view>
</view>
</template>
<script>
import MescrollUni from "../../components/mescroll-uni/mescroll-uni.vue";
import uniLoadMore from "../../components/uni-load-more/uni-load-more.vue";
export default {
components: {
MescrollUni,
uniLoadMore
},
data() {
return {
isShowLoad: false,
showLoading:false,
mescroll: null,
}
},
//注册滚动到底部的事件,用于上拉加载
onReachBottom() {
this.mescroll && this.mescroll.onReachBottom();
},
//注册列表滚动事件,用于下拉刷新
onPageScroll(e) {
this.mescroll && this.mescroll.onPageScroll(e);
},
methods: {
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
// 下拉刷新的回调
downCallback(mescroll){
mescroll.resetUpScroll()
},
upCallback(mescroll) {
console.log(9)
//联网加载数据
//this.listQuery.pageNum=mescroll.num;
// this.getListDataFromNet(this.listQuery, (curPageData)=>{
// mescroll.endSuccess(curPageData.length);
// //设置列表数据
// if(mescroll.num == 1) this.list = [];
// this.list=this.list.concat(curPageData);
// }, () => {
// //联网失败的回调,隐藏下拉刷新的状态
// mescroll.endErr();
// })
},
}
}
</script>
<style lang="less" scoped>
.topicBox {
width: 100%;
height: 100%;
.topBanner {
width: 100%;
height: 310upx;
image {
width: 100%;
height: 100%;
}
}
}
.toppicList {
width: 100%;
box-sizing: border-box;
padding: 0 30upx;
.itemCon {
width: 325upx;
float: left;
margin-top: 60upx;
&:nth-of-type(2n) {
margin-left: 40upx;
}
dt {
width: 100%;
height: 216upx;
image {
width: 100%;
height: 100%;
}
}
dd {
width: 100%;
text-align: center;
line-height: 1;
margin-top: 23upx;
color: #333333;
font-size: 28upx;
}
}
}
</style>
pages/topicDetail/topicDetail.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="topicDetailBox">
<view class="topBanner">
<image src="../../static/swiperPic.png" mode=""></image>
</view>
<view class="list">
<dl>
<dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt>
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
<dl>
<!-- <dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt> -->
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
<dl>
<!-- <dt>
<image src="../../static/topicImg.png" mode=""></image>
</dt> -->
<dd>
<ul>
<li class="topicTitle">裴李岗遗址最新测年距今8000年前后 发现旧石器晚期遗存</li>
<li class="videoPicCon">
<image src="../../static/swiperPic.png" mode=""></image>
<image src="../../static/icon_detail_bofang.png" mode=""></image>
</li>
<li class="uploadTimer">
<span>中国新闻网</span>
<span>2020-11-03</span>
</li>
</ul>
</dd>
</dl>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.topicDetailBox {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-top: 30upx;
.topBanner {
width: 100%;
height: 300upx;
box-sizing: border-box;
padding: 0 30upx;
image {
width: 100%;
height: 100%;
}
}
.list {
width: 100%;
box-sizing: border-box;
padding: 0 30upx;
margin-top: 55upx;
dl {
width: 100%;
border-bottom: 1px solid #EEEEEE;
display: flex;
flex-direction: row-reverse;
padding: 40upx 0;
&:first-child {
padding-top: 0;
}
&:last-child {
border: none;
}
dt {
width: 200upx;
height: 134upx;
border-radius: 10upx;
image {
width: 100%;
height: 100%;
}
}
dd {
flex: 1;
line-height: 1;
margin-inline-start: 0px;
ul {
margin-top: -10upx;
padding-inline-start: 0px;
li {
list-style: none;
}
.topicTitle {
color: #222222;
font-size: 30upx;
line-height: 48upx;
}
.videoPicCon {
width: 100%;
height: 388upx;
position: relative;
margin-top: 30upx;
image:nth-of-type(1) {
width: 100%;
height: 100%;
}
image:nth-of-type(2) {
width: 96upx;
height: 96upx;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
.uploadTimer {
margin-top: 29upx;
span {
color: #A8ACB4;
font-size: 24upx;
&:nth-of-type(1) {
margin-right: 30upx;
}
}
}
}
}
}
}
}
</style>
pages/video/video.vue 0 → 100644
浏览文件 @ 576f65cd
<template>
<view class="audioDetailBox">
<view class="audioCon">
<video id="myVideo" :src=src controls></video>
</view>
<view class="aduioRelations">
<h2>习近平主席在第三届中国国际进口博览会开幕式上的主旨演讲传递信心与力量</h2>
<text class="source">来源：中国政协</text>
<view class="TimerAndPlayerNum">
<text>发布时间：2020-08-26</text>
<text>播放次数：500次</text>
</view>
</view>
<view class="synopsis">
<h3>简介</h3>
<p>11月4日，习近平主席在第三届中国国际进口博览会开幕式上发表主旨演讲，再次向世界展示了中国推动高水平开放的坚定决心和战略定力，再次向世界表明了中国致力于与各国互利共赢的不变初心和不懈追求，让与会代表和参展商受鼓舞、有信心、添动力。
“习近平主席提出的共同开放，体现着中国致力于推动全球化朝着更加包容的方向发展。”南非总统拉马福萨在致辞中如是表示。
“习近平主席的主旨演讲传递了新时代中国深化改革开放、推动合作共赢的强烈信号，彰显了中国推动建设开放型世界经济、携手共创美好未来的智慧与担当。”强生全球资深副总裁、中国区主席宋为群表示。</p>
</view>
</view>
</template>
<script>
import freeAudio from '../../components/free-audio/free-audio.vue'
export default {
components: {
freeAudio
},
data() {
return {
src: '../../static/yy.mp4',
}
},
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
methods: {
}
}
</script>
<style lang="less" scoped>
.audioDetailBox {
width: 100%;
background: #f2f2f2;
.audioCon {
width: 100%;
height: 390upx;
#myVideo {
width: 100%;
height: 100%;
}
}
.aduioRelations {
width: 100%;
height: 100%;
line-height: 1;
box-sizing: border-box;
padding: 33upx 30upx 50upx;
background: #FFFFFF;
border-radius: 0 0 14upx 14upx;
h2 {
color: #3D3D3D;
font-size: 34upx;
font-weight: bold;
line-height: 48upx;
}
.source {
color: #FFAF5A;
display: block;
font-size: 24upx;
margin: 16upx auto 26upx;
}
.TimerAndPlayerNum {
color: #999999;
font-size: 20upx;
display: flex;
justify-content: space-between;
}
}
.synopsis {
width: 100%;
background: #FFFFFF;
box-sizing: border-box;
padding: 0 30upx;
margin-top: 20upx;
border-radius: 14upx 14upx 0 0;
line-height: 1;
padding-top: 50upx;
h3 {
color: #333333;
font-size: 30upx;
margin-bottom: 38upx;
}
p {
color: #666666;
font-size: 28upx;
line-height: 48upx;
text-indent: 2em;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论