11 changed files with 216 additions and 21 deletions
@ -0,0 +1,185 @@ |
|||||||
|
<template> |
||||||
|
<view class="information-box"> |
||||||
|
<view class="search-box acea-row row-middle" > |
||||||
|
<image src="../../../static/images/act-address.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_H" scroll-x="true"> |
||||||
|
<view class="rotaion acea-row row-center" > |
||||||
|
<image src="../../../static/images/collect.png" mode=""></image> |
||||||
|
<view class="rotaion-h">今日大事</view> |
||||||
|
<view class="rotaion-s">每日热点资讯</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
<!-- 最新资讯 --> |
||||||
|
<view class="newInfo-box"> |
||||||
|
<image src="../../../static/images/newInfo.png" mode=""></image> |
||||||
|
<view class="newInfo"> |
||||||
|
<view class="modular acea-row"> |
||||||
|
<view class="acea-row title" >1 |
||||||
|
<!-- <view class="modular-h">海鸥出行将大巴车市场带入平台化阶段，提高包车出行效率</view> |
||||||
|
<view class="title-l acea-row row-column-between"> |
||||||
|
<view>yun</view> |
||||||
|
<view>yun</view> |
||||||
|
<view>yun</view> |
||||||
|
</view> --> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view><image src="../../../static/images/gd2.png" mode="" ></image></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_H{ |
||||||
|
width: 100%; |
||||||
|
height: 208rpx; |
||||||
|
margin: 40rpx 0 0 40rpx; |
||||||
|
} |
||||||
|
.rotaion{ |
||||||
|
width: 168rpx; |
||||||
|
height: 208rpx; |
||||||
|
padding-top: 32rpx; |
||||||
|
background: #FFFFFF; |
||||||
|
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16); |
||||||
|
border-radius: 16rpx; |
||||||
|
margin-right: 32rpx; |
||||||
|
} |
||||||
|
.rotaion image{ |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
background: #FF6D2A; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.rotaion-h{ |
||||||
|
height: 34rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
.rotaion-s{ |
||||||
|
height: 26rpx; |
||||||
|
font-size: 18rpx; |
||||||
|
color: #9D9D9D; |
||||||
|
} |
||||||
|
/* 最新资讯 */ |
||||||
|
.newInfo-box{ |
||||||
|
margin: 44rpx 0 32rpx 0; |
||||||
|
} |
||||||
|
.newInfo-box image{ |
||||||
|
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; |
||||||
|
} |
||||||
|
.modular image{ |
||||||
|
width: 204rpx; |
||||||
|
height: 134rpx; |
||||||
|
border: 1rpx solid #212226; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
width: 392rpx; |
||||||
|
height: 134rpx; |
||||||
|
border: 1rpx solid #212226; |
||||||
|
} |
||||||
|
.title-l{ |
||||||
|
width: 278rpx; |
||||||
|
height: 34rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 5.2 KiB |
Loading…
Reference in new issue