Skip to content

C
crisis-event-miniprogram
Commit 6583c0ed by liangyuhang
Options

首页样式修改

parent d0c0eb96
Showing with 210 additions and 167 deletions
app.wxss
......@@ -8,7 +8,6 @@
overflow: scroll;
}
.moudle-title{
padding: 20rpx 38rpx;
overflow: hidden;
......
components/top/top.wxss
/* components/top/top.wxss */
.top{
width: 100%;
height: 150rpx;
/* background-color: #025FEA; */
background-image: linear-gradient(#025FEA 50%,#DAE5F5 100%);
height: 350rpx;
background-image: linear-gradient(#025FEA 60%,#F7F7F7 100%);
margin-bottom: -350rpx;
}
\ No newline at end of file
image/left.png 0 → 100644
image/left.png

422 Bytes

pages/index/index.js
......@@ -2,7 +2,6 @@
// 获取应用实例
const app = getApp()
var http = require('../../utils/http')
const moment = require('../../utils/moment.min.js')
Page({
data: {
......@@ -10,7 +9,7 @@ Page({
crisisField:[],
crisisArticle:[],
crisisReport:[],
banner:true,
showBanner:true,
toView: 'banner',
anchorList:[
{
......@@ -62,12 +61,8 @@ Page({
setCrisisArticleData(){
http.getRequest('/mobile/index/article/recently').then(res=>{
if(res){
let arr = res.data.data
arr.forEach(item => {
item.publishTime = moment(item.publishTime).format('YYYY-MM-DD')
})
this.setData({
crisisArticle:arr
crisisArticle:res.data.data
})
}
})
......@@ -83,7 +78,7 @@ Page({
},
closeBanner(){
this.setData({
banner: false
showBanner: false
})
},
scrollToViewFn(e){
......@@ -104,11 +99,17 @@ Page({
}
})
},
// 跳转搜索页
toSearchPage: function () {
wx.navigateTo({
url: '/pages/search-page/search-page',
})
},
//跳转事件详情页
toEventDetail(e){
var _eventId = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/event-detail/event-detail?eventId='+ _eventId,
})
}
})
pages/index/index.json
{
"usingComponents": {},
"enablePullDownRefresh": true
"usingComponents": {
"top": "/components/top/top"
},
"enablePullDownRefresh": true,
"backgroundColor": "#025FEA",
"backgroundTextStyle": "dark"
}
\ No newline at end of file
pages/index/index.wxss
/**index.wxss**/
page{
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
}
.con{
width: 92%;
margin: 0 auto;
}
.line{
margin : 15px 0;
width: 100%;
border-top: 15px solid rgb(242 242 242);
}
.title-line{
margin-bottom: 25rpx;
}
.title{
font-weight: 700;
font-style: normal;
font-size: 18px;
.index-container{
width: 700rpx;
background-color: #fff;
border-radius: 10px;
margin: 0rpx auto;
margin-bottom: 30rpx;
box-shadow: 0px 5px 5px #e8e8e8;
padding: 30rpx 0;
}
.right{
.more{
float:right;
min-width: 80rpx;
text-align: center;
display:block;
color: #7f7f7f;
margin-right: 30rpx;
font-size: 26rpx;
}
.more::after{
content: '>';
width: 13rpx;
height: 24rpx;
padding-left: 10rpx;
}
/* 横幅 */
......@@ -33,14 +29,15 @@ page{
height: 50rpx;
text-align: center;
vertical-align: middle;
background-color: #dae3f1;
color: #025FEA;
background-color: #3F85EF;
color: #fff;
}
.banner text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 2px;
font-size: 26rpx;
}
.banner .close{
display: inline;
......@@ -49,55 +46,64 @@ page{
}
/* 搜索 */
.search {
.search-box {
position: relative;
height: 90rpx;
background-color: #fff;
margin-top: 50rpx;
}
.search .search_in {
box-sizing: border-box;
height: 60rpx;
width: 100%;
background-color: #ffffff;
border-radius: 10rpx;
border: 1px solid #8b8b8b;
background: #f7f7f7;
z-index: 999;
width: 700rpx;
margin: 50rpx auto;
border-radius: 50rpx;
}
.search_in .search_btn {
position: absolute;
right: 0;
top:0;
.sear-input {
height: 60rpx;
line-height: 30rpx;
width: 22vw;
border-radius:0 10rpx 10rpx 0;
background-color: #00a2ff;
color: #ffffff;
text-align: center;
line-height: 60rpx;
margin-left: 80rpx;
border-radius: 50rpx;
font-size: 26rpx;
background: #f7f7f7;
color: #ccc;
letter-spacing: 2px;
}
.search-box .search-img {
position: absolute;
left: 20rpx;
top: 14rpx;
width: 30rpx;
height: 30rpx;
}
/* 锚点 */
.anchor{
.anchors{
display: flex;
justify-content: center;
text-align: center;
margin-top: 25px;
justify-content: space-between;
width: 700rpx;
background-color: #fff;
border-radius: 10px;
margin: 0rpx auto;
margin-bottom: 30rpx;
box-shadow: 0px 5px 5px #e8e8e8;
padding: 30rpx 0;
}
.icon{
width: 25vw;
.anchors .anchor{
display: flex;
flex-direction: column;
width: 25%;
text-align: center;
align-items: center;
}
.icon image{
width: 7vw;
height: 7vw;
.anchors .anchor image{
width: 75rpx;
height: 75rpx;
}
.icon .text{
display: block;
.anchors .anchor .text{
font-size: 26rpx;
margin-top: 10rpx;
}
/* 危机动态 */
.carousel{
margin-top: 25rpx;
padding: 30rpx;
position: relative;
}
.carousel .dynamic_img{
......@@ -105,19 +111,19 @@ page{
}
.carousel .dynamic_title{
position: absolute;
top: 20rpx;
top: 50rpx;
left: 30rpx;
font-weight: bold;
font-size: 36rpx;
font-size: 30rpx;
color: #FFFFFF;
}
.carousel .dynamic_level{
position: absolute;
top: 20rpx;
right: 30rpx;
color: #FFFFFF;
width: 80rpx;
height: 50rpx;
top: 0;
right: 0;
font-size: 26rpx;
color: #fff;
padding: 5rpx 25rpx;
background-color: #f87653;
text-align: center;
}
......@@ -125,82 +131,82 @@ page{
position: absolute;
top: 100rpx;
left: 30rpx;
font-weight: bold;
font-size: 30rpx;
color: #FFFFFF;
font-size: 26rpx;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 1;
}
.carousel .dynamic_brand{
position: absolute;
bottom: 50rpx;
left: 30rpx;
width: 150rpx;
height: 50rpx;
background-color: #ffffff;
padding: 5rpx 25rpx;
background-color: #BAB7B6;
font-size: 26rpx;
text-align: center;
}
.carousel .dynamic_tag{
position: absolute;
bottom: 50rpx;
left: 200rpx;
width: 150rpx;
height: 50rpx;
background-color: #ffffff;
padding: 5rpx 25rpx;
background-color: #BAB7B6;
font-size: 26rpx;
text-align: center;
}
/* 聚焦领域 */
.time-type{
display: flex;
height: 80rpx;
}
.select_time{
width: 15vw;
height: 35rpx;
background-color: #f2f2f2;
font-size: 25rpx;
margin: 0rpx 15rpx 25rpx 0rpx;
text-align: center;
.field-content{
padding: 30rpx;
}
.field-table{
border: solid 2px #f3f3f3;
}
.field-th{
display: flex;
justify-content: center;
height: 60rpx;
line-height: 60rpx;
.time-type{
display: inline-block;
text-align: center;
margin-bottom: 20rpx;
}
.field-th text:nth-child(1){
width: 25vh;
font-size: 26rpx;
color: #999;
margin-bottom: 30rpx;
background-color: #fff;
}
.field-th text:nth-child(2){
width: 30vh;
.time-type text{
padding: 5rpx 25rpx;
border: 1px solid #EFF3F6;
}
.field-th text:nth-child(3){
width: 45vh;
.time-type .active{
background-color: #EFF3F6;
}
.field-list{
.field{
display: flex;
height: 80rpx;
}
.field-list .field-tag{
width: 25%;
font-weight: bold;
text-align: center;
.field field-right{
display: flex;
flex-direction:column;
width: 600rpx;
margin-right: 10rpx;
}
.field .field-tag{
font-size: 24rpx;
color: #fff;
background-color: #488CF0;
padding: 5rpx;
}
.field-list .field-proportion{
.field .field-brand{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx;
color: #ccc;
}
.field .field-proportion{
width: 30%;
line-height: 80rpx;
color: #00a2ff;
text-align: center;
font-weight: bold;
}
.field-list .field-brand{
width: 30%;
}
.field-list .field-brand text{
.field .field-brand text{
font-size: 26rpx;
color: #333333;
display: -webkit-box;
......@@ -208,33 +214,57 @@ page{
-webkit-line-clamp: 2;
overflow: hidden;
}
.field-list .unfold{
font-size: 26rpx;
color: #00a2ff;
padding-left: 20rpx;
line-height: 80rpx;
}
/* 危机复盘 */
.article-list{
border: solid 2px #f3f3f3;
.article-content{
padding: 0 30rpx;
}
.article{
display: flex;
flex-direction: column;
margin-top: 25rpx;
padding: 15rpx;
margin-top: 30rpx;
}
.article-title{
color: #333;
.article .imgBox{
width: 300rpx;
height: 144rpx;
margin-right: 30rpx;
}
.article .imgBox image {
width: 100%;
height: 100%;
border-radius: 5px;
}
.article .content{
position: relative;
width: 400rpx;
}
.article .content .article-title{
font-weight: bold;
margin-bottom: 25rpx;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-time{
.article .content .article-source{
position: absolute;
bottom: 0;
left: 0;
font-size: 24rpx;
}
.article .content .article-time{
position: absolute;
bottom: 0;
right: 0;
font-size: 24rpx;
color: #999;
}
/* 危机报告 */
.report-first{
.report-container{
padding: 0 30rpx;
}
/* .report-first{
position: relative;
width: 100%;
height: 324rpx;
......@@ -257,25 +287,24 @@ page{
line-height: 66rpx;
background-color: rgba(0,0,0,0.4);
color: #ffffff;font-size: 28rpx;
}
.report-list{
width: 100%;
height: 180rpx;
margin-bottom: 25rpx;
} */
.report{
display: flex;
margin-top: 30rpx;
}
.report-list .imgBox {
height: 100%;
margin-right: 20rpx;
.report .imgBox {
width: 200rpx;
height: 144rpx;
margin-right: 30rpx;
}
.report-list .imgBox image{
.report .imgBox image{
width: 100%;
height: 100%;
border-radius: 5px;
}
.report-list .content{
.report .content{
position: relative;
height: 180rpx;
width: 100%;
width: 500rpx;
}
.content .report-name{
position: absolute;
......@@ -286,10 +315,12 @@ page{
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
font-weight: 28rpx;
font-weight: bold;
}
.content .report-introduction{
position: absolute;
top: 60rpx;
top: 50rpx;
left: 0;
color: #999;
font-size: 24rpx;
......@@ -307,11 +338,6 @@ page{
}
.line-title {
text-align: center;
margin: 30rpx 0;
color: #888888;
}
pages/usercenter/usercenter.wxml
......@@ -38,18 +38,18 @@
<text style="display: block;">我的报告</text>
</view>
<view class="items" bindtap="todo">
<image src="../../image/auth.png" mode="aspectFill" lazy-load="true"></image>
<image src="../../image/account.png" mode="aspectFill" lazy-load="true"></image>
<text style="display: block;">账号权限</text>
</view>
<view class="items" bindtap="todo">
<image src="../../image/account.png" mode="aspectFill" lazy-load="true"></image>
<text style="display: block;">账号管理</text>
<image src="../../image/connect.png" mode="aspectFill" lazy-load="true"></image>
<text style="display: block;">联系客服</text>
</view>
</view>
</view>
<view wx:if="{{isLogin}}">
<button class="logout-btn" bindtap="logout" style="color: red;">退出登录</button>
<button class="logout-btn" bindtap="logout">退出登录</button>
</view>
<view wx:else>
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" class="login-btn">点此登录</button>
......
pages/usercenter/usercenter.wxss
/* pages/usercenter/usercenter.wxss */
.usercenter{
background-color:#e8ebf1;
background-color:#F7F7F7;
height:100vh;
}
......@@ -8,9 +8,9 @@
position: relative;
width: 700rpx;
height: 200rpx;
margin: -100rpx auto;
background-color: #fff;
border-radius: 5px;
border-radius: 10px;
margin: 200rpx auto 50rpx;
box-shadow: 0px 5px 5px #e8e8e8;
}
.userinfo-avatar {
......@@ -48,9 +48,9 @@
.features{
width: 700rpx;
height: 250rpx;
margin: 130rpx auto;
margin: -30rpx auto 150rpx;
background-color: #fff;
border-radius: 5px;
border-radius: 10px;
box-shadow: 0px 5px 5px #e8e8e8;
}
......@@ -78,4 +78,14 @@
height: 100rpx;
width: 100rpx;
align-items: center;
}
.login-btn{
background-color: #fff;
box-shadow: 0px 5px 5px #e8e8e8;
}
.logout-btn{
background-color: #fff;
box-shadow: 0px 5px 5px #e8e8e8;
color: red;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment