xmhjc-applet/pages/index/base/Market.vue

<template>
    <view>
        <view class="title" >
            <view class="title_text">{{info.title}}</view>
            <view class="title_more" @click="clicktoMore">更多></view>
        </view>

        <view class="box" >
            <view @click="clicktabs(menuslist[0])" v-if="menuslist[0]" class="leftbox" >
                <u--image width="280rpx" height="340rpx" :src="menuslist[0].imgUrl" ></u--image>
            </view>
            <view class="rightbox">
                <view @click="clicktabs(menuslist[1])" v-if="menuslist[1]" class="rightbox_item">
                    <u--image width="406rpx" height="162rpx" :src="menuslist[1].imgUrl" ></u--image>
                </view>
                <view @click="clicktabs(menuslist[2])" v-if="menuslist[2]" style="margin-top: 20rpx;" class="rightbox_item">
                    <u--image width="406rpx" height="162rpx" :src="menuslist[2].imgUrl" ></u--image>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
import {moduleByThree} from '@/http/api/common.js'
export default {
data() {
    return {
        menuslist:[],
        info:{
            title:'信息行情'
        }
    }
},
async mounted() {
   this.getmoduleByThree()
},
methods: {
    async getmoduleByThree(){
        //获取模块3
        let res = await moduleByThree()
        this.menuslist = []
        if (res.data.code == 200) {
            this.info = res.data.data
            this.menuslist = res.data.data.subList.map(v =>{
                return {
                    ...v,
                    imgUrl:v.coverList[0].fileUrl
                }
            })

        }
    },
    clicktabs(item){
        let data = {
            curNowid:item.columnId,
            curNowsubid:item.subId,
        }
        uni.setStorageSync('curNowdata',JSON.stringify(data) );
        uni.switchTab({
            url: '/pages/home/Information',
        });
    },
    clicktoMore(){
        if (this.info?.moreToSubId && this.info?.moreToColumnId) {
            let data = {
                curNowid:this.info?.moreToColumnId,
                curNowsubid:this.info?.moreToSubId,
            }
            uni.setStorageSync('curNowdata',JSON.stringify(data) );
            uni.switchTab({
                url: '/pages/home/Information',
            });
        }
    },
}
}
</script>

<style>
.title{
    display: flex;
    width: 90vw;
    justify-content: space-between;
    margin: 0 auto;
}
.title_text{
    width: 128rpx;
    height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 45rpx;
}
.title_more{
    width: 80rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
}
.box{
    display: flex;
    margin: 20rpx 0;
    justify-content: center;
}
.leftbox{
    width: 280rpx;
    height: 340rpx;
    /* background: #FFE9CC;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1; */

    background: linear-gradient(180deg, #FFEDD6 0%, #FECE8F 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
}
.rightbox{
    margin-left: 20rpx;
    width: 406rpx;
    height: 340rpx;
    background: white;
    opacity: 1;
}
.rightbox_item{
    height: 162rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background: #FFEDD6;
}
</style>