123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <template>
- <view class="container">
- <view class="statusBarHG" :style="'height:'+statusBarHeight+'px'"></view>
- <view class="tab-h flex-row sticky flex-y-center" :style="'top:'+statusBarHeight+'px'">
- <view class="item" :class="tabType == 1?'active':''" @click="onTabChange(1)">文案教程</view>
- <!-- <view class="item" :class="tabType == 2?'active':''" @click="onTabChange(2)">文章</view> -->
- <view class="item" :class="tabType == 2?'active':''" @click="onTabChange(2)">视频教程</view>
- </view>
- <view class="statusBarHG" style="height:45px"></view>
- <view class="tab-b">
- <navigator :url="'./detail?id='+item.id+'&tabType='+tabType" class="item flex-row" v-for="(item,index) in list" :key="item.id">
- <image :src="item.thumb" mode="aspectFill" class="img"></image>
- <view class="info">
- <view class="title text-1">{{item.title}}</view>
- <view class="desc text-1">{{item.desc}}</view>
- <view class="time">{{item.create_time}}</view>
- </view>
- </navigator>
- </view>
- <view class="no-more" v-if="list.length<=0">
- 暂无内容
- </view>
- <!-- <page-btm-bar :active="2" /> -->
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- tabType: 1,
- list: [],
- statusBarHeight: 0,
- }
- },
- methods: {
- onTabChange(index) {
- this.tabType = index
- index == 1 ? this.jcdetail() : this.vdlist();
- },
- jcdetail() {
- this.request({
- url: "Content/jclist",
- data: {},
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.list = res.data;
- }
- }).catch((res) => {});
- },
- vdlist() {
- this.request({
- url: "Content/vdlist",
- data: {},
- }).then(res => {
- console.log(res, "res")
- if (res.code === '200') {
- this.list = res.data;
- }
- }).catch((res) => {});
- },
- },
- onLoad() {
- this.jcdetail();
- this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
- },
- }
- </script>
- <style>
- .tab-h {
- padding: 0rpx 40rpx;
- height: 45px;
- background-color: #fff;
- position: fixed;
- /* top: var(--window-top); */
- }
- .tab-h .item {
- font-size: 40rpx;
- color: #242424;
- font-weight: 500;
- line-height: 67rpx;
- margin-right: 60rpx;
- /* transition: all 0.2s; */
- }
- .tab-h .item.active {
- font-size: 48rpx;
- }
- .tab-b .item {
- padding: 20rpx 40rpx;
- align-items: flex-start;
- }
- .tab-b .item .img {
- flex: none;
- display: block;
- width: 230rpx;
- height: 160rpx;
- border-radius: 10rpx;
- }
- .tab-b .item .info {
- flex: none;
- width: 416rpx;
- min-height: 160rpx;
- padding-left: 24rpx;
- display: flex;
- flex-flow: column nowrap;
- justify-content: flex-start;
- align-items: flex-start;
- }
- .tab-b .item .info .title {
- font-size: 32rpx;
- color: #333;
- font-weight: 500;
- line-height: 45rpx;
- }
- .tab-b .item .info .desc {
- font-size: 28rpx;
- color: #999;
- font-weight: 400;
- line-height: 40rpx;
- margin-top: 10rpx;
- }
- .tab-b .item .info .time {
- font-size: 26rpx;
- color: #adadad;
- font-weight: 400;
- line-height: 37rpx;
- margin-top: auto;
- }
- .no-more {
- text-align: center;
- font-size: 30rpx;
- color: #999999;
- }
- </style>
|