wardrobe/pages/xiaoxi/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="消息列表" :shadow="0" :showback="true"></tm-menubars>
		<view class="tou C1b1b1b pb-30">
			<view class="flex-center"><tm-segTabs :list="list" v-model="active"></tm-segTabs></view>
		</view>
		<tm-card
			title="冬季的羽绒 | 蓬松、轻盈、温暖"
			:content="text"
			:btnColor="['primary', 'red']"
			statusColor="red"
		>
			<template v-slot:content="{ text }">
				<view>
					<tm-images src="../../static/img/60.png" mode="widthFix"></tm-images>
					<view class="py-24 tetx-size-m wenzi">考虑到居家、出行等各类环境下的保暖需求，身穿系列服装即便身处于日渐冷冽的户外，也能感受随性自</view>
					<view class="gengduo">
						<tm-listitem title="查看详情"></tm-listitem>
					</view>
				</view>
			</template>
		</tm-card>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			active: 0,
			list: ['活动消息', '服务消息', '系统消息'],
			text:
							'路透社援引消息人士的话称，立陶宛外长兰茨贝尔吉斯最近向总统瑙塞达提议，将台驻立陶宛机构中文名称中的“台湾”改为“台湾人民”，想以此缓和与中国的紧张关系。这已经不是立陶宛方面第一次就更名问题放出风声，此前'
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		aa(num){
			if(num==1){
				this.checked1=true;
				this.checked2=false;
				this.checked3=false;
			}else if(num==2){
				this.checked1=false;
				this.checked2=true;
				this.checked3=false;
			}else if(num==3){
				this.checked1=false;
				this.checked2=false;
				this.checked3=true;
			}
		},
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .zhuti{padding: 10px 10px;}
	/deep/ .kuang{margin:0 !important;padding: 0px !important;}
	/deep/ .tm-segTabs{border: 1px solid #303030;border-radius: 5px;width: 70%;height:40px;}
	/deep/ .tm-segTabs-item{margin-top: 4px !important;}
	/deep/ .tm-segTabs-bg-bar{margin-top: 6px !important;background: #0178FD !important;border-radius: 2px !important;}
	.wenzi{color: #AAAAAA;}
	/deep/ .tm-card{
		padding-bottom: 30px !important;
	}
	/deep/ .gengduo .grey-darken-4{
		background: #1B1B1B !important;
		padding: 0 !important;
		margin: 0 !important;
		position: absolute;
		top: 20px;
		width: 100%;
	}
</style>