Compare commits
3 Commits
e06f4c8692
...
99d8a466ec
| Author | SHA1 | Date |
|---|---|---|
 kk_888
|
99d8a466ec | 3 years ago |
 杨豪
|
4ddf3f0305 | 3 years ago |
|
杨豪
|
bc960c8f91 | 3 years ago |
17 changed files with 1597 additions and 954 deletions
@ -0,0 +1,378 @@
|
||||
<template> |
||||
<view class="information-box"> |
||||
<view class="search-box acea-row row-middle" > |
||||
<image src="../../../static/images/search-icon.png" mode=""></image> |
||||
<input type="text" value="" placeholder="请输入相关关键词"/> |
||||
<view class="search acea-row row-center-wrapper">搜一下</view> |
||||
</view> |
||||
<view class="vote-box"> |
||||
<view class="news"> |
||||
<view class="news-title-h">武汉12月底双层公交车将全面下线</view> |
||||
<view class="news-title-s">趁着有时间和你爱的人再去回味一下,那你认为有下线的必要吗？</view> |
||||
</view> |
||||
<view class="vote"> |
||||
|
||||
</view> |
||||
</view> |
||||
<scroll-view class="scroll-view_N" scroll-x="true" > |
||||
<view class="rotaion" v-for="(item,index) in 7" :key="index"> |
||||
<view class="acea-row row-center"> |
||||
<image src="../../../static/images/collect.png" mode=""></image> |
||||
<view class="rotaion-h">今日大事</view> |
||||
<view class="rotaion-s">每日热点资讯</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</scroll-view> |
||||
<!-- 最新资讯 --> |
||||
<view class="newInfo-box"> |
||||
<image src="../../../static/images/newInfo.png" mode="" class="newInfo-title-img"></image> |
||||
<view class="newInfo" > |
||||
<view class="modular acea-row row-between" v-for="(item,index) in 3" :key="index"> |
||||
<view class="acea-row title" > |
||||
<view class="modular-h">海鸥出行将大巴车市场带入平台化阶段，提高包车出行效率</view> |
||||
<view class="title-l acea-row row-between"> |
||||
<view>云资讯</view> |
||||
<view>1小时前</view> |
||||
<view class="acea-row row-middle">203 |
||||
<image src="../../../static/images/eye.png" mode="" ></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<image src="../../../static/images/home/top-bg.png" mode="" ></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 热点精选 --> |
||||
<view class="hotspot-box"> |
||||
<image src="../../../static/images/user/hotspot.png" mode="" class="title-h-img"></image> |
||||
<scroll-view class="scroll-view_H acea-row" scroll-x="true" > |
||||
<view class="slide-box" v-for="(item,index) in 3" :key="index"> |
||||
<image src="../../../static/images/home/top-bg.png" mode=""></image> |
||||
<view class="hotspot-con"> |
||||
<view class="hotspot-icon">热点</view> |
||||
<view class="hotspot-title-h">禅易云生态：加入云生态，共建万亿私域资源圈获取海量资源与福利。</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
<!-- 值得关注 --> |
||||
<view class="follow-box"> |
||||
<image src="../../../static/images/follow-title.png" mode="" class="title-h-img"></image> |
||||
<view class="follow-con" v-for="(item,index) in 3" :key="index"> |
||||
<view class="follow-top acea-row row-between"> |
||||
<view class="acea-row follow-title" > |
||||
<view class="follow-h">2021中国酒店与商用厨具行业品牌盛会</view> |
||||
<view class="follow-title-l acea-row row-between"> |
||||
<view>云资讯</view> |
||||
<view>1小时前</view> |
||||
<view class="acea-row row-middle">203 |
||||
<image src="../../../static/images/eye.png" mode="" ></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<image src="../../../static/images/home/top-bg.png" mode="" ></image> |
||||
</view> |
||||
<view class="follow-bottom acea-row row-middle"> |
||||
<image src="../../../static/images/collect.png" mode=""></image> |
||||
<view class="follow-title-b"> |
||||
<view class="title-s">云咨詢</view> |
||||
<view class="title-con">每天发布商业/生活等相关内容...</view> |
||||
</view> |
||||
<view class="follow-btn">关注+</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
</script> |
||||
|
||||
<style> |
||||
.information-box{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
position: relative; |
||||
} |
||||
.search-box{ |
||||
width: 670rpx; |
||||
height: 68rpx; |
||||
border: 2rpx solid #FF5100; |
||||
border-radius: 8rpx; |
||||
margin: 52rpx auto; |
||||
font-size: 28rpx; |
||||
position: relative; |
||||
} |
||||
.search-box image{ |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
margin: 0 29rpx 0 52rpx; |
||||
} |
||||
.search{ |
||||
position: absolute; |
||||
right: 0; |
||||
width: 132rpx; |
||||
height: 68rpx; |
||||
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%); |
||||
border-radius: 8rpx; |
||||
color: #fff; |
||||
|
||||
} |
||||
.vote-box{ |
||||
width: 670rpx; |
||||
height: 358rpx; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 16rpx; |
||||
margin: 0 auto; |
||||
position: relative; |
||||
} |
||||
.news{ |
||||
width: 100%; |
||||
height: 248rpx; |
||||
background: #D2D2D2; |
||||
border-radius: 16rpx 16rpx 0 0; |
||||
color: #FFF; |
||||
position: absolute; |
||||
padding-left: 42rpx; |
||||
} |
||||
.news-title-h{ |
||||
font-size: 28rpx; |
||||
position: absolute; |
||||
bottom: 54rpx; |
||||
} |
||||
.news-title-s{ |
||||
font-size: 20rpx; |
||||
position: absolute; |
||||
bottom: 18rpx; |
||||
} |
||||
.vote{ |
||||
width: 100%; |
||||
height: 110rpx; |
||||
position: absolute; |
||||
bottom: 0; |
||||
border: 1rpx solid #000000; |
||||
} |
||||
.scroll-view_N{ |
||||
width: 100%; |
||||
height: 228rpx; |
||||
margin: 30rpx 0 0 30rpx; |
||||
white-space: nowrap; |
||||
} |
||||
.rotaion{ |
||||
width: 168rpx; |
||||
padding: 32rpx 0 16rpx 0; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 16rpx; |
||||
margin: 10rpx 22rpx 20rpx 10rpx; |
||||
display: inline-block; |
||||
} |
||||
.rotaion image{ |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
background: #FF6D2A; |
||||
border-radius: 50%; |
||||
} |
||||
.rotaion-h{ |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
color: #333333; |
||||
margin: 12rpx 0 4rpx 0; |
||||
font-weight: 600; |
||||
} |
||||
.rotaion-s{ |
||||
height: 26rpx; |
||||
font-size: 18rpx; |
||||
color: #9D9D9D; |
||||
} |
||||
/* 最新资讯 */ |
||||
.newInfo-box{ |
||||
margin: 44rpx 0 0rpx 0; |
||||
} |
||||
.newInfo-title-img{ |
||||
width: 160rpx; |
||||
height: 52rpx; |
||||
margin: 0 0 18rpx 38rpx; |
||||
} |
||||
.newInfo{ |
||||
width: 100%; |
||||
height: 528rpx; |
||||
border-top: 2rpx solid #EFEFEF; |
||||
} |
||||
.modular{ |
||||
width: 100%; |
||||
height: 176rpx; |
||||
border-bottom: 2rpx solid #EFEFEF; |
||||
padding: 20rpx 40rpx 22rpx 40rpx; |
||||
} |
||||
|
||||
.modular-h{ |
||||
width: 392rpx; |
||||
height: 80rpx; |
||||
font-size: 28rpx; |
||||
color: #4A4A4A; |
||||
font-weight: 600; |
||||
} |
||||
.modular image{ |
||||
width: 204rpx; |
||||
height: 134rpx; |
||||
} |
||||
.title{ |
||||
width: 392rpx; |
||||
height: 134rpx; |
||||
} |
||||
.title-l{ |
||||
width: 310rpx; |
||||
height: 34rpx; |
||||
font-size: 24rpx; |
||||
color: #707070; |
||||
} |
||||
.title-l image{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-left: 5rpx; |
||||
} |
||||
/* 热点精选 */ |
||||
.hotspot-box{ |
||||
width: 100%; |
||||
height: 456rpx; |
||||
} |
||||
.title-h-img{ |
||||
width: 162rpx; |
||||
height: 62rpx; |
||||
margin: 32rpx 0 5rpx 40rpx; |
||||
} |
||||
.scroll-view_H{ |
||||
width: 100%; |
||||
height: 344rpx; |
||||
white-space: nowrap; |
||||
} |
||||
.scroll-view_H image{ |
||||
width: 670rpx; |
||||
height: 344rpx; |
||||
border-radius: 10rpx; |
||||
position: absolute; |
||||
} |
||||
.slide-box{ |
||||
position: relative; |
||||
width: 670rpx; |
||||
height: 100%; |
||||
display: inline-block; |
||||
margin-right: 16rpx; |
||||
} |
||||
.hotspot-con{ |
||||
width: 588rpx; |
||||
height: 130rpx; |
||||
bottom: 34rpx; |
||||
left: 24rpx; |
||||
position: absolute; |
||||
} |
||||
.hotspot-icon{ |
||||
width: 72rpx; |
||||
height: 32rpx; |
||||
background: #FE3737; |
||||
border-radius: 12rpx 2rpx 12rpx 0; |
||||
position: absolute; |
||||
font-size: 22rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
|
||||
} |
||||
.hotspot-title-h{ |
||||
width: 588rpx; |
||||
height: 80rpx; |
||||
font-size: 28rpx; |
||||
color: #FFFFFF; |
||||
position: absolute; |
||||
bottom: 0; |
||||
white-space:pre-wrap; |
||||
} |
||||
/* 值得关注 */ |
||||
.follow-box{ |
||||
width: 100%; |
||||
height: 950rpx; |
||||
margin-bottom: 50rpx; |
||||
} |
||||
.follow-con{ |
||||
width: 670rpx; |
||||
height: 250rpx; |
||||
margin: 0 auto; |
||||
background: #FFFFFF; |
||||
box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.16); |
||||
border-radius: 16rpx; |
||||
margin-bottom: 32rpx; |
||||
} |
||||
.follow-top{ |
||||
width: 100%; |
||||
height: 170rpx; |
||||
padding: 20rpx 20rpx 26rpx 20rpx; |
||||
border-bottom: 1rpx solid #DCDCDC; |
||||
} |
||||
.follow-top image{ |
||||
width: 232rpx; |
||||
height: 130rpx; |
||||
border-radius: 16rpx; |
||||
} |
||||
.follow-title{ |
||||
width: 370rpx; |
||||
height: 100%; |
||||
} |
||||
.follow-h{ |
||||
width: 370rpx; |
||||
height: 80rpx; |
||||
font-size: 28rpx; |
||||
color: #000000; |
||||
font-weight: 600; |
||||
} |
||||
.follow-title-l{ |
||||
width: 250rpx; |
||||
height: 28rpx; |
||||
font-size: 20rpx; |
||||
color: #707070; |
||||
} |
||||
.follow-title-l image{ |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
margin-left: 5rpx; |
||||
} |
||||
.follow-bottom{ |
||||
width: 100%; |
||||
height: 80rpx; |
||||
padding: 12rpx 20rpx 16rpx 20rpx; |
||||
} |
||||
.follow-bottom image{ |
||||
width: 52rpx; |
||||
height: 52rpx; |
||||
border-radius: 50%; |
||||
margin-right: 8rpx; |
||||
} |
||||
.follow-title-b{ |
||||
|
||||
} |
||||
|
||||
.title-s{ |
||||
height: 28rpx; |
||||
font-size: 20rpx; |
||||
margin-bottom: 6rpx; |
||||
font-weight: 600; |
||||
} |
||||
.title-con{ |
||||
height: 22rpx; |
||||
font-size: 16rpx; |
||||
color: #707070; |
||||
} |
||||
|
||||
.follow-btn{ |
||||
width: 136rpx; |
||||
height: 40rpx; |
||||
background: linear-gradient(39deg, #FF5A0D 0%, #FFAC85 100%); |
||||
border-radius: 26rpx; |
||||
font-size: 28rpx; |
||||
color: #fff; |
||||
text-align: center; |
||||
position: absolute; |
||||
right: 60rpx; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue