97 lines
1.6 KiB
Vue
97 lines
1.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="header">
|
|
<view
|
|
:class="[{ active: selectCount == 1 }]"
|
|
@click="switchUpper(1)"
|
|
>
|
|
专题
|
|
</view>
|
|
<view
|
|
:class="[{ active: selectCount == 2 }]"
|
|
@click="switchUpper(2)"
|
|
>
|
|
资讯
|
|
</view>
|
|
</view>
|
|
<view class="lower-cont">
|
|
<view class="single-info">
|
|
<h4 class="tit">我是内容</h4>
|
|
<h4 class="time">2023-10-31 14:51:23</h4>
|
|
</view>
|
|
<view class="single-info">
|
|
<h4 class="tit">我是内容</h4>
|
|
<h4 class="time">2023-10-31 14:51:23</h4>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectCount: 1
|
|
}
|
|
},
|
|
methods: {
|
|
switchUpper (count) {
|
|
this.selectCount = count
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body{
|
|
background: linear-gradient(#E5F1FD, #fff);
|
|
}
|
|
.header{
|
|
width: 95%;
|
|
margin: 25rpx auto;
|
|
margin-top: 60rpx;
|
|
display: flex;
|
|
view{
|
|
width: 15%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #B7B7BC;
|
|
font-size: 14px;
|
|
}
|
|
.active{
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.lower-cont{
|
|
width: 90%;
|
|
margin: 25rpx auto;
|
|
margin-top: 0;
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
.single-info{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15rpx 25rpx;
|
|
border-bottom: 1px solid #F5F5F5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.tit{
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.time{
|
|
font-weight: normal;
|
|
color: #BEBEBE;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.single-info:last-child{
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
</style>
|