jiazhipeng
1 year ago
13 changed files with 899 additions and 8 deletions
@ -0,0 +1,214 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="swipe-box" v-if="info.images"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
|||
indicator-active-color="#fff" @change="swiperChange"> |
|||
<swiper-item v-for="(item, index) in info.images.split(',')" :key="item.id"> |
|||
<view class="swiper-item"> |
|||
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="swiper-pointer"> |
|||
{{swiperCurrent}}/{{info.images.split(',').length}} |
|||
</view> |
|||
|
|||
<view class="collect" style="right: 100rpx;" @click.stop="collect()"> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
|||
</view> |
|||
|
|||
<view class="collect" @click.stop="share()"> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240902/8eb614e4ea41db655a4e6da2cc0ca954.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="common-container info-container"> |
|||
<view class="info-title text-overflowRows">{{info.title}}</view> |
|||
<view class="text-overflow" style="padding: 40rpx 0 16rpx;">{{info.address}}</view> |
|||
<view class="text-overflow" v-if="info.start_time && info.end_time">时间：{{info.start_time}} - {{info.end_time}}</view> |
|||
</view> |
|||
<view class="common-container detail-container"> |
|||
<view class="" id="cpts" v-html="formateRichText(info.detail)"></view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
swiperCurrent: 1, |
|||
info: {}, |
|||
} |
|||
}, |
|||
onShow(options) { |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id; |
|||
this.getInfo(); |
|||
}, |
|||
methods: { |
|||
swiperChange (e) { |
|||
this.swiperCurrent = e.detail.current+1 |
|||
}, |
|||
// 获取信息 |
|||
getInfo() { |
|||
this.Post({id: this.id},'/api/activity/getActivityCalendarDetail').then(res => { |
|||
if (res.data.flag == 0) { |
|||
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
|||
setTimeout(() => {this.goBack()}, 2000) |
|||
} |
|||
this.info = res.data; |
|||
}); |
|||
}, |
|||
// 收藏 |
|||
collect() { |
|||
this.Post({type: 7,id: this.id},'/api/scenic/collect').then(res => { |
|||
if (res) { |
|||
uni.showToast({title: res.msg,icon: 'none'}); |
|||
this.info.is_collect = !this.info.is_collect |
|||
} |
|||
}); |
|||
}, |
|||
share () { |
|||
var pages = getCurrentPages() //获取加载的页面 |
|||
var view = pages[pages.length - 1] //获取当前页面的对象 |
|||
uni.share({ |
|||
provider: "weixin", |
|||
scene: "WXSceneSession", |
|||
type: 0, |
|||
href: `${view.route}`, |
|||
title: this.info.title, |
|||
imageUrl: this.showImg(this.info.image), |
|||
success: function (res) { |
|||
console.log("success:" + JSON.stringify(res)); |
|||
}, |
|||
fail: function (err) { |
|||
console.log("fail:" + JSON.stringify(err)); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #F8F8F8; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 867rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item-num { |
|||
width: 90rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
} |
|||
|
|||
.collect{ |
|||
position: absolute; |
|||
width: 51rpx; |
|||
height: 51rpx; |
|||
right: 20rpx; |
|||
top: 20rpx; |
|||
font-size: 23rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
.swiper-pointer{ |
|||
position: absolute; |
|||
right: 20rpx; |
|||
bottom: 20rpx; |
|||
background: rgba(22,22,22,0.5); |
|||
border-radius: 23rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 6rpx 14rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.swiper { |
|||
height: 867rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 867rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 867rpx; |
|||
} |
|||
.item-img.pop-swiper-image{ |
|||
height: 347rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.common-container{ |
|||
background: white; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
.info-container{ |
|||
padding: 34rpx 25rpx; |
|||
width: 100%; |
|||
margin-bottom: 21rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 25rpx; |
|||
color: #666666; |
|||
.info-title{ |
|||
|
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
} |
|||
|
|||
.detail-container{ |
|||
width: 100%; |
|||
padding: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="swipe-box"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
|||
indicator-active-color="#fff" @change="swiperChange"> |
|||
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id"> |
|||
<view class="swiper-item"> |
|||
<image class="item-img" :src="showImg(item)" ></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="swiper-pointer"> |
|||
{{swiperCurrent}}/{{info.list_images.split(',').length}} |
|||
</view> |
|||
|
|||
<view class="collect" @click.stop="collect()"> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="common-container info-container"> |
|||
<view class="info-title text-overflowRows">{{info.title}}</view> |
|||
</view> |
|||
<view class="common-container detail-container"> |
|||
<view class="" id="cpts" v-html="formateRichText(info.feature_content)"></view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
swiperCurrent: 1, |
|||
info: {list_images:''}, |
|||
} |
|||
}, |
|||
onShow(options) { |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id; |
|||
this.getInfo(); |
|||
}, |
|||
methods: { |
|||
swiperChange (e) { |
|||
this.swiperCurrent = e.detail.current+1 |
|||
}, |
|||
// 获取信息 |
|||
getInfo() { |
|||
this.Post({goods_id: this.id},'/api/goods/getGoodDetail').then(res => { |
|||
if (res.data.flag == 0) { |
|||
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
|||
setTimeout(() => {this.goBack()}, 2000) |
|||
} |
|||
this.info = res.data; |
|||
}); |
|||
}, |
|||
// 收藏 |
|||
collect() { |
|||
this.Post({type: 6,id: this.id},'/api/scenic/collect').then(res => { |
|||
if (res) { |
|||
uni.showToast({title: res.msg,icon: 'none'}); |
|||
this.info.is_collect = !this.info.is_collect |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #F8F8F8; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 867rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item-num { |
|||
width: 90rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
} |
|||
|
|||
.collect{ |
|||
position: absolute; |
|||
width: 51rpx; |
|||
height: 51rpx; |
|||
right: 36rpx; |
|||
top: 36rpx; |
|||
font-size: 23rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
.swiper-pointer{ |
|||
position: absolute; |
|||
right: 36rpx; |
|||
bottom: 80rpx; |
|||
background: rgba(22,22,22,0.5); |
|||
border-radius: 23rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 6rpx 14rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.swiper { |
|||
height: 867rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 867rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 867rpx; |
|||
} |
|||
.item-img.pop-swiper-image{ |
|||
height: 347rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.common-container{ |
|||
background: white; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
.info-container{ |
|||
padding: 34rpx 25rpx; |
|||
width: 100%; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
margin-bottom: 21rpx; |
|||
} |
|||
|
|||
.detail-container{ |
|||
width: 100%; |
|||
padding: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,200 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="swipe-box" v-if="info.images"> |
|||
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" |
|||
indicator-active-color="#fff" @change="swiperChange"> |
|||
<swiper-item v-for="(item, index) in info.images.split(',')" :key="item.id"> |
|||
<view class="swiper-item"> |
|||
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
<view class="swiper-pointer"> |
|||
{{swiperCurrent}}/{{info.images.split(',').length}} |
|||
</view> |
|||
|
|||
<view class="collect" @click.stop="collect()"> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
|||
</view> |
|||
|
|||
<!-- <view class="collect" @click.stop="share()"> |
|||
<image src="https://tongli.sz-trip.com/uploads/20240902/8eb614e4ea41db655a4e6da2cc0ca954.png"></image> |
|||
</view> --> |
|||
</view> |
|||
|
|||
|
|||
<view class="common-container info-container"> |
|||
<view class="info-title text-overflowRows">{{info.title}}</view> |
|||
<view class="flex-between" style="padding: 40rpx 0 0;"> |
|||
<view>浏览 {{info.view}}</view> |
|||
<view>发布时间：{{info.create_time}}</view> |
|||
</view> |
|||
|
|||
<!-- <view class="text-overflow" v-if="info.start_time && info.end_time">时间：{{info.start_time}} - {{info.end_time}}</view> --> |
|||
</view> |
|||
<view class="common-container detail-container"> |
|||
<view class="" id="cpts" v-html="formateRichText(info.detail)"></view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
id: null, |
|||
swiperCurrent: 1, |
|||
info: {}, |
|||
} |
|||
}, |
|||
onShow(options) { |
|||
}, |
|||
onLoad(options) { |
|||
this.id = options.id; |
|||
this.getInfo(); |
|||
}, |
|||
methods: { |
|||
swiperChange (e) { |
|||
this.swiperCurrent = e.detail.current+1 |
|||
}, |
|||
// 获取信息 |
|||
getInfo() { |
|||
this.Post({id: this.id},'/api/article/getArticleById').then(res => { |
|||
if (res.data.flag == 0) { |
|||
uni.showToast({title: '文章不存在或已下架',icon: 'none'}) |
|||
setTimeout(() => {this.goBack()}, 2000) |
|||
} |
|||
this.info = res.data; |
|||
}); |
|||
}, |
|||
// 收藏 |
|||
collect() { |
|||
this.Post({type: 1,id: this.id},'/api/scenic/collect').then(res => { |
|||
if (res) { |
|||
uni.showToast({title: res.msg,icon: 'none'}); |
|||
this.info.is_collect = !this.info.is_collect |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #F8F8F8; |
|||
} |
|||
|
|||
.swipe-box { |
|||
height: 867rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item-num { |
|||
width: 90rpx; |
|||
height: 40rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 20rpx; |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
position: absolute; |
|||
right: 30rpx; |
|||
bottom: 50rpx; |
|||
} |
|||
|
|||
.collect{ |
|||
position: absolute; |
|||
width: 51rpx; |
|||
height: 51rpx; |
|||
right: 20rpx; |
|||
top: 20rpx; |
|||
font-size: 23rpx; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
.swiper-pointer{ |
|||
position: absolute; |
|||
right: 20rpx; |
|||
bottom: 20rpx; |
|||
background: rgba(22,22,22,0.5); |
|||
border-radius: 23rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
padding: 6rpx 14rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.swiper { |
|||
height: 867rpx; |
|||
position: relative; |
|||
|
|||
.swiper-item { |
|||
width: 100%; |
|||
height: 867rpx; |
|||
|
|||
.item-img { |
|||
width: 750rpx; |
|||
height: 867rpx; |
|||
} |
|||
.item-img.pop-swiper-image{ |
|||
height: 347rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.common-container{ |
|||
background: white; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
.info-container{ |
|||
padding: 34rpx 25rpx; |
|||
width: 100%; |
|||
margin-bottom: 21rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 25rpx; |
|||
color: #666666; |
|||
.info-title{ |
|||
|
|||
font-weight: bold; |
|||
font-size: 35rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
} |
|||
|
|||
.detail-container{ |
|||
width: 100%; |
|||
padding: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="topImg relative"> |
|||
<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill"> |
|||
<view class="icon-back" :style="{top:systemInfo.textTop,left:'19rpx'}" @click="goBack()" > |
|||
<uni-icons type="left" size="24" color="#242424"></uni-icons> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="tag-container no-scrollbar"> |
|||
<view :class="['tag', type_id==0?'active':'']" @click="setTag(0)">全部</view> |
|||
<view :class="['tag', type_id==1?'active':'']" v-for="(item,i) in 10" :key="i" @click="setTag(i)">景点</view> |
|||
</view> |
|||
|
|||
<view class="strategy-box box"> |
|||
<view v-for="(num,nums) in 2" :key="nums"> |
|||
<view v-for="(item,index) in list" :key="index" class="strategy-item" v-if="index % 2 === nums" @click="viewDetail(item)"> |
|||
<!-- <view class="title-tag" v-if="item.image_tag">{{item.image_tag}}</view> --> |
|||
<image class="strategy-image" :src="showImg(item.image)" mode="widthFix"></image> |
|||
<view class="strategy-content"> |
|||
<view class="strategy-title">{{item.title}}</view> |
|||
<view class="flex-between"> |
|||
<view class="text-overflow" style="display: flex;align-items: center;width: 200rpx;"> |
|||
<image :src="showImg(item.author_img)" mode="" class="author-img"></image> |
|||
{{item.author}} |
|||
</view> |
|||
<view style="display: flex;align-items: center;"> |
|||
<image src="https://static.ticket.sz-trip.com/yandu/images/index/eye.png" mode="" class="eye-img"></image> |
|||
{{item.view}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default{ |
|||
data(){ |
|||
return { |
|||
systemInfo: { |
|||
height:"0px", |
|||
textHeight:"0px", |
|||
textTop:"0px", |
|||
contentTop: '0px', |
|||
}, |
|||
|
|||
list: [], |
|||
showMore: true, |
|||
headImg:"https://tongli.sz-trip.com/uploads/20240902/55c5cbe137790323cc719b5c83d5e2e9.png", |
|||
|
|||
type_id: 0,//景点分类id |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.showMore = true |
|||
}, |
|||
onReady() { |
|||
this.getArticleByType() |
|||
}, |
|||
onLoad(options) { |
|||
let that = this |
|||
uni.getSystemInfo({ |
|||
success(res) { |
|||
console.log(res) |
|||
that.systemInfo.height =res.windowHeight+'px' |
|||
const menu=uni.getMenuButtonBoundingClientRect() |
|||
that.systemInfo.textHeight=menu.height+"px" |
|||
that.systemInfo.textTop=menu.top+"px" |
|||
that.systemInfo.contentTop = (menu.height + menu.top)+"px" |
|||
console.log(that.systemInfo) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
methods: { |
|||
setTag (item) { |
|||
this.type_id = item |
|||
// this.getArticleByType() |
|||
}, |
|||
|
|||
// 游记攻略 |
|||
getArticleByType() { |
|||
this.Post({ |
|||
type_id: 41, |
|||
offset: this.list.length, |
|||
limit: 10 |
|||
},'/api/Article/getArticleByType').then(res => { |
|||
this.list = [...this.list, ...res.data] |
|||
|
|||
if(res.data.length < 10) this.showMore = false |
|||
}) |
|||
}, |
|||
// 游记攻略查看更多 |
|||
strategyMore() { |
|||
this.getArticleByType() |
|||
}, |
|||
viewDetail (item) { |
|||
uni.navigateTo({ |
|||
url:'/subPackages/travelGuide/detail?id='+item.id |
|||
}) |
|||
}, |
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (!this.showMore) this.getList() |
|||
},1000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
font-family: PingFangSC; |
|||
} |
|||
.bg{ |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
} |
|||
.topImg{ |
|||
width: 100%; |
|||
height: 440rpx; |
|||
.icon-back{ |
|||
position: absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
z-index: 50; |
|||
} |
|||
} |
|||
|
|||
.tag-container{ |
|||
margin: 42rpx 26rpx; |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
overflow-y: auto; |
|||
.tag{ |
|||
flex-shrink: 0; |
|||
border-radius: 13rpx; |
|||
border: 1px solid #999999; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
padding: 13rpx 29rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
.tag.active{ |
|||
background: linear-gradient(90deg, #9EE4FE, #7FD491); |
|||
border: none; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.strategy-box { |
|||
padding: 0 26rpx; |
|||
padding-bottom: 50rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.strategy-item { |
|||
width: 339rpx; |
|||
border-radius: 13rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 28rpx; |
|||
position: relative; |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38); |
|||
|
|||
.title-tag { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 153rpx; |
|||
line-height: 47rpx; |
|||
background: #71B580; |
|||
border-radius: 20rpx 0rpx 20rpx 0rpx; |
|||
text-align: center; |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #FFFFFF; |
|||
overflow-x: auto; |
|||
white-space: nowrap; |
|||
} |
|||
.title-tag::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
|
|||
.strategy-image { |
|||
width: 337rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.strategy-content { |
|||
background: #FFFFFF; |
|||
padding: 20rpx; |
|||
|
|||
.strategy-title { |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 31rpx; |
|||
color: #2C2C2C; |
|||
} |
|||
|
|||
.flex-between { |
|||
font-weight: 500; |
|||
font-family: PingFang SC; |
|||
font-size: 24rpx; |
|||
color: #000000; |
|||
|
|||
margin-top: 14rpx; |
|||
|
|||
.author-img { |
|||
width: 37rpx; |
|||
height: 37rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
.eye-img { |
|||
width: 26.67rpx; |
|||
height: 18.67rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue