123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- <!-- 视频专栏 -->
- <template>
- <view class="wrap">
- <view class="tab-list">
- <view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList" :key="index"
- @click="checked(index)">
- {{item.title}}
- <image src="../../../static/border.png" class="border-img" mode="widthFix"></image>
- </view>
- </view>
- <view class="content-box" v-if="isActive == 0">
- <view class="video-module" @click="informationDetails">
- <video id="myVideo"
- src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
- enable-danmu controls style="width: 100%;height: 262rpx;"></video>
- <view class="video-title">
- 时令养生到底怎么去养生?
- </view>
- </view>
- <view class="list">
- <view class="item" @click="informationDetails">
- <view class="item-top">
- <view class="item-top-sidebar">
- <view class="item-top-name">大暑已到易伤津耗气,可用药粥滋补身体</view>
- <view class="item-top-msg">
- 3.2万人浏览
- </view>
- </view>
- <view class="img-box">
- <image src="../../../static/img-4.png" class="item-top-img" mode="aspectFill"></image>
- <image src="../../../static/play.png" class="play-img"></image>
- </view>
- </view>
- </view>
- <view class="item" @click="informationDetails">
- <view class="item-top">
- <view class="item-top-sidebar">
- <view class="item-top-name">大暑已到易伤津耗气,可用药粥滋补身体</view>
- <view class="item-top-msg">
- 3.2万人浏览
- </view>
- </view>
- <view class="img-box">
- <image src="../../../static/img-4.png" class="item-top-img" mode="aspectFill"></image>
- <image src="../../../static/play.png" class="play-img"></image>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="content-box" v-if="isActive == 1">
- <view class="video-module" @click="videoDetails">
- <video id="myVideo"
- src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
- enable-danmu controls style="width: 100%;height: 262rpx;"></video>
- <view class="video-title">
- 时令养生到底怎么去养生?
- </view>
- </view>
- <view class="list-2">
- <view class="item-2">
- <view class="img-box2">
- <image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
- <image src="../../../static/play.png" class="play-img"></image>
- </view>
- <view class="item-bottom">
- <view class="item-top-name">大暑已到易伤津耗气,可用药粥滋补身体</view>
- <view class="item-bottom-msg">
- 3.2万人浏览
- </view>
- </view>
- </view>
- <view class="item-2">
- <view class="img-box2">
- <image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
- <image src="../../../static/play.png" class="play-img"></image>
- </view>
- <view class="item-bottom">
- <view class="item-top-name">大暑已到易伤津耗气,可用药粥滋补身体</view>
- <view class="item-bottom-msg">
- 3.2万人浏览
- </view>
- </view>
- </view>
- <view class="item-2">
- <view class="img-box2">
- <image src="../../../static/img-4.png" class="item-img2" mode="aspectFill"></image>
- <image src="../../../static/play.png" class="play-img"></image>
- </view>
- <view class="item-bottom">
- <view class="item-top-name">大暑已到易伤津耗气,可用药粥滋补身体</view>
- <view class="item-bottom-msg">
- 3.2万人浏览
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="content-box" v-if="isActive == 2">
- <view class="product-list">
- <view class="product-item" @click="productDetails">
- <view class="product-item-column2">
- <image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
- </image>
- <view class="product-item-column2-bottom">
- <view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
- <view class="product-item-column2-row-between">
- <view class="product-item-column2-price">
- ¥394.00
- <text>¥34.00</text>
- </view>
- <button type="default" class="product-item-column2-btn">
- <image src="../../../static/add-icon.png" mode=""></image>
- </button>
- </view>
- </view>
- </view>
- </view>
- <view class="product-item" @click="productDetails">
- <view class="product-item-column2">
- <image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
- </image>
- <view class="product-item-column2-bottom">
- <view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
- <view class="product-item-column2-row-between">
- <view class="product-item-column2-price">
- ¥394.00
- <text>¥34.00</text>
- </view>
- <button type="default" class="product-item-column2-btn">
- <image src="../../../static/add-icon.png" mode=""></image>
- </button>
- </view>
- </view>
- </view>
- </view>
- <view class="product-item" @click="productDetails">
- <view class="product-item-column2">
- <image src="../../../static/img-4.png" class="product-item-column2-img" mode="aspectFill">
- </image>
- <view class="product-item-column2-bottom">
- <view class="product-item-column-name2">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
- <view class="product-item-column2-row-between">
- <view class="product-item-column2-price">
- ¥394.00
- <text>¥34.00</text>
- </view>
- <button type="default" class="product-item-column2-btn">
- <image src="../../../static/add-icon.png" mode=""></image>
- </button>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- ;
- export default {
- data() {
- return {
- //选项卡
- isActive: 1,
- navList: [{
- index: 0,
- title: '资讯',
- }, {
- index: 1,
- title: "养生",
- }, {
- index: 2,
- title: "产品"
- }]
- }
- },
- onLoad() {
- },
- methods: {
- checked(index) {
- this.isActive = index
- },
- //跳转咨询详情
- informationDetails() {
- uni.navigateTo({
- url: '../../health-encyclopedia/video-details/video-details'
- })
- },
- // 跳转视频详情
- videoDetails() {
- uni.navigateTo({
- url: '../../health-encyclopedia/video-details/video-details'
- })
- },
- // 跳转商品详情
- productDetails() {
- uni.navigateTo({
- url: '../product-details/product-details'
- })
- },
- }
- }
- </script>
- <style scoped lang="scss">
- @import "./video-column.css";
- </style>
|