83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
<template>
|
|
<view class="top-section">
|
|
<view class="top-section-news">
|
|
<view class="top-section-img">
|
|
<image
|
|
class="image"
|
|
mode="aspectFit"
|
|
src="@/assets/images/page/icon_smart@2x.png"
|
|
></image>
|
|
</view>
|
|
<view class="news-title">
|
|
<view class="num">1</view>
|
|
<view class="text"
|
|
>小米将于6月26日发布新款YU7车型上市小米将于6月26日发布新款YU7车型上市</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.top-section {
|
|
height: 104rpx;
|
|
margin: 0 20rpx 20rpx;
|
|
background: linear-gradient(90deg, #fce8ea 0%, #ffffff 27.03%, #ffffff 100%);
|
|
box-shadow: inset 0px 1rpx 0px 0px #ffffff;
|
|
border-radius: 20rpx;
|
|
|
|
.top-section-news {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 12rpx 20rpx;
|
|
|
|
.top-section-img {
|
|
width: 83rpx;
|
|
height: 75rpx;
|
|
padding-right: 10rpx;
|
|
border-right: 1px solid #e7e9eb;
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.news-title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 22rpx;
|
|
|
|
.num {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
margin-right: 13rpx;
|
|
text-align: center;
|
|
background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
|
|
border-radius: 5px;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
}
|
|
.text {
|
|
width: 488rpx;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #111111;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|