Skip to content

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

首页样式修改

parent d0c0eb96
Showing with 295 additions and 225 deletions
app.wxss
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
overflow: scroll; overflow: scroll;
} }
.moudle-title{ .moudle-title{
padding: 20rpx 38rpx; padding: 20rpx 38rpx;
overflow: hidden; overflow: hidden;
......
components/top/top.wxss
/* components/top/top.wxss */ /* components/top/top.wxss */
.top{ .top{
width: 100%; width: 100%;
height: 150rpx; height: 350rpx;
/* background-color: #025FEA; */ background-image: linear-gradient(#025FEA 60%,#F7F7F7 100%);
background-image: linear-gradient(#025FEA 50%,#DAE5F5 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 @@ ...@@ -2,7 +2,6 @@
// 获取应用实例 // 获取应用实例
const app = getApp() const app = getApp()
var http = require('../../utils/http') var http = require('../../utils/http')
const moment = require('../../utils/moment.min.js')
Page({ Page({
data: { data: {
...@@ -10,7 +9,7 @@ Page({ ...@@ -10,7 +9,7 @@ Page({
crisisField:[], crisisField:[],
crisisArticle:[], crisisArticle:[],
crisisReport:[], crisisReport:[],
banner:true, showBanner:true,
toView: 'banner', toView: 'banner',
anchorList:[ anchorList:[
{ {
...@@ -62,12 +61,8 @@ Page({ ...@@ -62,12 +61,8 @@ Page({
setCrisisArticleData(){ setCrisisArticleData(){
http.getRequest('/mobile/index/article/recently').then(res=>{ http.getRequest('/mobile/index/article/recently').then(res=>{
if(res){ if(res){
let arr = res.data.data
arr.forEach(item => {
item.publishTime = moment(item.publishTime).format('YYYY-MM-DD')
})
this.setData({ this.setData({
crisisArticle:arr crisisArticle:res.data.data
}) })
} }
}) })
...@@ -83,7 +78,7 @@ Page({ ...@@ -83,7 +78,7 @@ Page({
}, },
closeBanner(){ closeBanner(){
this.setData({ this.setData({
banner: false showBanner: false
}) })
}, },
scrollToViewFn(e){ scrollToViewFn(e){
...@@ -104,11 +99,17 @@ Page({ ...@@ -104,11 +99,17 @@ Page({
} }
}) })
}, },
// 跳转搜索页 // 跳转搜索页
toSearchPage: function () { toSearchPage: function () {
wx.navigateTo({ wx.navigateTo({
url: '/pages/search-page/search-page', 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": {}, "usingComponents": {
"enablePullDownRefresh": true "top": "/components/top/top"
},
"enablePullDownRefresh": true,
"backgroundColor": "#025FEA",
"backgroundTextStyle": "dark"
} }
\ No newline at end of file
pages/index/index.wxml
<!--index.wxml--> <!--index.wxml-->
<scroll-view scroll-y="true" style="height: 100vh" scroll-into-view="{{toView}}" scroll-with-animation="true" class="container"> <view class="container">
<scroll-view style="height: 100vh;background-color: #F7F7F7;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true">
<!-- 顶部背景色 -->
<top></top>
<!-- 横幅 --> <!-- 横幅 -->
<view class="banner" wx:if="{{banner}}"> <view class="banner" wx:if="{{showBanner}}">
<swiper style="height: 50rpx;" autoplay="true" vertical="true" circular="true"> <swiper style="height: 50rpx;" autoplay="true" vertical="true" circular="true">
<block wx:for="{{crisisDynamic}}" wx:key="index"> <block wx:for="{{crisisDynamic}}" wx:key="index">
<swiper-item> <swiper-item>
...@@ -13,44 +17,38 @@ ...@@ -13,44 +17,38 @@
</swiper> </swiper>
</view> </view>
<!-- 顶部 -->
<view id="top" class="con">
<!-- 搜索 --> <!-- 搜索 -->
<view class="search"> <view class='search-box' bindtap='toSearchPage'>
<view class="search_in" bindtap='toSearchPage'> <input placeholder="请输入关键词搜索" class='sear-input' disabled></input>
<input type="text"/> <image src='../../image/search.png' class='search-img'></image>
<button class="search_btn">搜索</button>
</view>
</view> </view>
<!-- 锚点 --> <!-- 锚点 -->
<view class="anchor"> <view class="anchors">
<block wx:for="{{anchorList}}" wx:key="index"> <block wx:for="{{anchorList}}" wx:key="index">
<view class="icon" bindtap="scrollToViewFn" data-id="{{item.id}}"> <view class="anchor" bindtap="scrollToViewFn" data-id="{{item.id}}">
<image src="{{item.img}}"/> <image src="{{item.img}}"/>
<text class="text">{{item.text}}</text> <text class="text">{{item.text}}</text>
</view> </view>
</block> </block>
</view> </view>
</view>
<view class="line"></view>
<!-- 危机动态 --> <!-- 危机动态 -->
<view id="dynamic" class="con"> <view id="dynamic" class="index-container">
<view class="title-line"> <view class="title">
<text class="title">危机动态</text> <text class="moudle-title">危机动态</text>
<navigator url="/pages/library/library" open-type="switchTab" class="right">查看全部></navigator> <navigator url="/pages/library/library" open-type="switchTab" class="more">查看全部</navigator>
</view> </view>
<!-- 品牌 -->
<!-- 轮播图 -->
<swiper indicator-dots="true" autoplay="true" class="carousel" circular="true"> <swiper indicator-dots="true" autoplay="true" class="carousel" circular="true">
<block wx:for="{{crisisDynamic}}" wx:key="index"> <block wx:for="{{crisisDynamic}}" wx:key="index">
<swiper-item> <swiper-item bindtap="toEventDetail" data-id="{{item.id}}">
<navigator url="https://crisis.zhiweidata.com/event/{{item.id}}">
<image class="dynamic_img" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/L5VHPP/e9/83/b8/e983b88902ca4085bcbc34d714ac6904/images/首页/u22.svg?pageId=794f4729-ba77-4770-92d6-71dfe84a18c1" mode="scaleToFill" /> <image class="dynamic_img" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/L5VHPP/e9/83/b8/e983b88902ca4085bcbc34d714ac6904/images/首页/u22.svg?pageId=794f4729-ba77-4770-92d6-71dfe84a18c1" mode="scaleToFill" />
<image class="dynamic_img2" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/L5VHPP/e9/83/b8/e983b88902ca4085bcbc34d714ac6904/images/%E9%A6%96%E9%A1%B5/u21.png?pageId=794f4729-ba77-4770-92d6-71dfe84a18c1" mode="scaleToFill" /> <image class="dynamic_img2" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/L5VHPP/e9/83/b8/e983b88902ca4085bcbc34d714ac6904/images/%E9%A6%96%E9%A1%B5/u21.png?pageId=794f4729-ba77-4770-92d6-71dfe84a18c1" mode="scaleToFill" />
</navigator>
<text class="dynamic_title">{{item.title}}</text> <text class="dynamic_title">{{item.title}}</text>
<text class="dynamic_level">{{item.crisisLevelZh}}</text> <text class="dynamic_level">{{item.crisisLevelZh}}风险</text>
<text class="dynamic_introduction">{{item.introduction}}</text> <text class="dynamic_introduction">摘要：{{item.introduction}}</text>
<text class="dynamic_brand">{{item.priBrand}}</text> <text class="dynamic_brand">{{item.priBrand}}</text>
<text class="dynamic_tag">{{item.priCrisisTags}}</text> <text class="dynamic_tag">{{item.priCrisisTags}}</text>
</swiper-item> </swiper-item>
...@@ -58,27 +56,22 @@ ...@@ -58,27 +56,22 @@
</swiper> </swiper>
</view> </view>
<view class="line"></view>
<!-- 聚焦领域 --> <!-- 聚焦领域 -->
<view id="field" class="con"> <view id="field" class="index-container">
<view class="title-line"> <view class="title">
<text class="title">聚焦领域</text> <text class="moudle-title">聚焦领域</text>
<text class="right">查看全部></text> <navigator url="/pages/index/index" open-type="switchTab" class="more">查看全部</navigator>
</view> </view>
<view class="field-content">
<view class="time-type"> <view class="time-type">
<view class="select_time" bindtap="refreshFieldData" data-type="month">近一月</view> <text bindtap="refreshFieldData" data-type="month" class="active">近1月</text>
<view class="select_time" bindtap="refreshFieldData" data-type="halfYear">近半年</view> <text bindtap="refreshFieldData" data-type="halfYear">近2月</text>
<view class="select_time" bindtap="refreshFieldData" data-type="year">近一年</view> <text bindtap="refreshFieldData" data-type="year">近1年</text>
</view>
<view class="field-table">
<view class="field-th">
<text>全行业</text>
<text>危机占比</text>
<text>涉及品牌</text>
</view> </view>
<block wx:for="{{crisisField}}" wx:key="index"> <block wx:for="{{crisisField}}" wx:key="index">
<view class="field-list"> <!-- <view class="field-list">
<view class="field-tag"> <view class="field-tag">
<text>{{item.tag}}</text> <text>{{item.tag}}</text>
<text style="display:block;color: red;font-size: 24rpx;">↑10%</text> <text style="display:block;color: red;font-size: 24rpx;">↑10%</text>
...@@ -88,44 +81,57 @@ ...@@ -88,44 +81,57 @@
<text>{{item.brand}}</text> <text>{{item.brand}}</text>
</view> </view>
<text class="unfold" bindtap="closeBanner">展开↓</text> <text class="unfold" bindtap="closeBanner">展开↓</text>
</view> -->
<view class="field">
<view class="field-right">
<view class="field-tag">{{item.tag}}</view>
<view class="field-brand">涉及品牌：{{item.brand}}</view>
</view> </view>
</block> <view class="field-left">
<view class="field-proportion">{{util.toPercent(item.proportion)}}</view>
<text style="display:block;color: red;font-size: 24rpx;">↑10%</text>
</view> </view>
</view> </view>
</block>
<view class="line"></view> </view>
</view>
<!-- 危机复盘 --> <!-- 危机复盘 -->
<view id="article" class="con"> <view id="article" class="index-container">
<view class="title-line"> <view class="title">
<text class="title">危机复盘</text> <text class="moudle-title">危机复盘</text>
<text class="right">查看全部></text> <navigator url="/pages/index/index" open-type="switchTab" class="more">查看全部</navigator>
</view> </view>
<view class="article-content">
<block wx:for="{{crisisArticle}}" wx:key="index"> <block wx:for="{{crisisArticle}}" wx:key="index">
<view class="article-list"> <view class="article">
<view class="imgBox">
<image src="https://crisis.zhiweidata.com/app/{{item.img}}" mode="aspectFill"></image>
</view>
<view class="content">
<view class="article-title">{{item.title}}</view> <view class="article-title">{{item.title}}</view>
<view class="article-time">{{item.publishTime}}</view> <view class="article-source">{{item.source}}</view>
<view class="article-time">{{dateUtil.dateFormat(item.publishTime,'yyyy.MM.dd')}}</view>
</view>
</view> </view>
</block> </block>
</view> </view>
</view>
<view class="line"></view>
<!-- 危机报告 --> <!-- 危机报告 -->
<view id="report" class="con"> <!-- <view id="report" class="index-container">
<view class="title-line"> <view class="title">
<text class="title">危机报告</text> <text class="moudle-title">危机报告</text>
<navigator url="/pages/report/report" open-type="switchTab" class="right">查看全部></navigator> <navigator url="/pages/report/report" open-type="switchTab" class="more">查看全部</navigator>
</view> </view>
<view class="report-container">
<block wx:for="{{crisisReport}}" wx:key="index"> <block wx:for="{{crisisReport}}" wx:key="index">
<!-- 首个新闻 -->
<view class="report-first" wx:if="{{index==0}}" data-item="{{crisisReport[0]}}"> <view class="report-first" wx:if="{{index==0}}" data-item="{{crisisReport[0]}}">
<image src="https://crisis.zhiweidata.com/app/{{crisisReport[0].imgUrl}}" /> <image src="https://crisis.zhiweidata.com/app/{{crisisReport[0].imgUrl}}" />
<view class="info">{{crisisReport[0].reportName}}</view> <view class="info">{{crisisReport[0].reportName}}</view>
</view> </view>
<!-- 列表 -->
<view class="report-list" wx:if="{{index>0}}"> <view class="report-list" wx:if="{{index>0}}">
<view class="imgBox"> <view class="imgBox">
<image mode="heightFix" src="https://crisis.zhiweidata.com/app/{{item.imgUrl}}"/> <image mode="heightFix" src="https://crisis.zhiweidata.com/app/{{item.imgUrl}}"/>
...@@ -137,12 +143,33 @@ ...@@ -137,12 +143,33 @@
</view> </view>
</view> </view>
</block> </block>
</view>
</view> -->
<view id="report" class="index-container">
<view class="title">
<text class="moudle-title">危机报告</text>
<navigator url="/pages/report/report" open-type="switchTab" class="more">查看全部</navigator>
</view>
<view class="report-container">
<block wx:for="{{crisisReport}}" wx:key="index">
<view class="report">
<view class="imgBox">
<image src="https://crisis.zhiweidata.com/app/{{item.imgUrl}}" mode="heightFix"/>
</view>
<view class="content">
<text class="report-name">{{item.reportName}}</text>
<text class="report-introduction">{{item.introduction}}</text>
<text class="report-time">{{dateUtil.dateFormat(item.publishTime,'yyyy.MM.dd')}}</text>
</view>
</view>
</block>
</view>
</view> </view>
<view class="line-title">--我是有底线的--</view>
</scroll-view> </scroll-view>
</view>
<wxs module="dateUtil" src="../../wxs/timeUtil.wxs"></wxs> <wxs module="dateUtil" src="../../wxs/timeUtil.wxs"></wxs>
<wxs module="util" src="../../wxs/util.wxs"></wxs> <wxs module="util" src="../../wxs/util.wxs"></wxs>
......
pages/index/index.wxss
/**index.wxss**/ /**index.wxss**/
page{ .index-container{
font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif; width: 700rpx;
} background-color: #fff;
.con{ border-radius: 10px;
width: 92%; margin: 0rpx auto;
margin: 0 auto; margin-bottom: 30rpx;
} box-shadow: 0px 5px 5px #e8e8e8;
.line{ padding: 30rpx 0;
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;
} }
.right{ .more{
float:right; float:right;
min-width: 80rpx;
text-align: center; text-align: center;
display:block; display:block;
color: #7f7f7f; color: #7f7f7f;
margin-right: 30rpx;
font-size: 26rpx;
}
.more::after{
content: '>';
width: 13rpx;
height: 24rpx;
padding-left: 10rpx;
} }
/* 横幅 */ /* 横幅 */
...@@ -33,14 +29,15 @@ page{ ...@@ -33,14 +29,15 @@ page{
height: 50rpx; height: 50rpx;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
background-color: #dae3f1; background-color: #3F85EF;
color: #025FEA; color: #fff;
} }
.banner text{ .banner text{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
letter-spacing: 2px; letter-spacing: 2px;
font-size: 26rpx;
} }
.banner .close{ .banner .close{
display: inline; display: inline;
...@@ -49,55 +46,64 @@ page{ ...@@ -49,55 +46,64 @@ page{
} }
/* 搜索 */ /* 搜索 */
.search { .search-box {
position: relative; position: relative;
height: 90rpx;
background-color: #fff;
margin-top: 50rpx;
}
.search .search_in {
box-sizing: border-box;
height: 60rpx; height: 60rpx;
width: 100%; background: #f7f7f7;
background-color: #ffffff; z-index: 999;
border-radius: 10rpx; width: 700rpx;
border: 1px solid #8b8b8b; margin: 50rpx auto;
border-radius: 50rpx;
} }
.search_in .search_btn { .sear-input {
position: absolute;
right: 0;
top:0;
height: 60rpx; height: 60rpx;
line-height: 30rpx; line-height: 60rpx;
width: 22vw; margin-left: 80rpx;
border-radius:0 10rpx 10rpx 0; border-radius: 50rpx;
background-color: #00a2ff;
color: #ffffff;
text-align: center;
font-size: 26rpx; 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; display: flex;
justify-content: center; justify-content: space-between;
text-align: center; width: 700rpx;
margin-top: 25px; background-color: #fff;
border-radius: 10px;
margin: 0rpx auto;
margin-bottom: 30rpx;
box-shadow: 0px 5px 5px #e8e8e8;
padding: 30rpx 0;
} }
.icon{ .anchors .anchor{
width: 25vw; display: flex;
flex-direction: column;
width: 25%;
text-align: center;
align-items: center;
} }
.icon image{ .anchors .anchor image{
width: 7vw; width: 75rpx;
height: 7vw; height: 75rpx;
} }
.icon .text{ .anchors .anchor .text{
display: block; font-size: 26rpx;
margin-top: 10rpx;
} }
/* 危机动态 */ /* 危机动态 */
.carousel{ .carousel{
margin-top: 25rpx; padding: 30rpx;
position: relative; position: relative;
} }
.carousel .dynamic_img{ .carousel .dynamic_img{
...@@ -105,19 +111,19 @@ page{ ...@@ -105,19 +111,19 @@ page{
} }
.carousel .dynamic_title{ .carousel .dynamic_title{
position: absolute; position: absolute;
top: 20rpx; top: 50rpx;
left: 30rpx; left: 30rpx;
font-weight: bold; font-weight: bold;
font-size: 36rpx; font-size: 30rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.carousel .dynamic_level{ .carousel .dynamic_level{
position: absolute; position: absolute;
top: 20rpx; top: 0;
right: 30rpx; right: 0;
color: #FFFFFF; font-size: 26rpx;
width: 80rpx; color: #fff;
height: 50rpx; padding: 5rpx 25rpx;
background-color: #f87653; background-color: #f87653;
text-align: center; text-align: center;
} }
...@@ -125,82 +131,82 @@ page{ ...@@ -125,82 +131,82 @@ page{
position: absolute; position: absolute;
top: 100rpx; top: 100rpx;
left: 30rpx; left: 30rpx;
font-weight: bold; font-size: 26rpx;
font-size: 30rpx; color: #fff;
color: #FFFFFF; overflow: hidden;
text-overflow: ellipsis;
line-clamp: 1;
} }
.carousel .dynamic_brand{ .carousel .dynamic_brand{
position: absolute; position: absolute;
bottom: 50rpx; bottom: 50rpx;
left: 30rpx; left: 30rpx;
width: 150rpx; padding: 5rpx 25rpx;
height: 50rpx; background-color: #BAB7B6;
background-color: #ffffff; font-size: 26rpx;
text-align: center; text-align: center;
} }
.carousel .dynamic_tag{ .carousel .dynamic_tag{
position: absolute; position: absolute;
bottom: 50rpx; bottom: 50rpx;
left: 200rpx; left: 200rpx;
width: 150rpx; padding: 5rpx 25rpx;
height: 50rpx; background-color: #BAB7B6;
background-color: #ffffff; font-size: 26rpx;
text-align: center; text-align: center;
} }
/* 聚焦领域 */ /* 聚焦领域 */
.time-type{ .field-content{
display: flex; padding: 30rpx;
height: 80rpx;
}
.select_time{
width: 15vw;
height: 35rpx;
background-color: #f2f2f2;
font-size: 25rpx;
margin: 0rpx 15rpx 25rpx 0rpx;
text-align: center;
} }
.field-table{ .time-type{
border: solid 2px #f3f3f3; display: inline-block;
}
.field-th{
display: flex;
justify-content: center;
height: 60rpx;
line-height: 60rpx;
text-align: center; text-align: center;
margin-bottom: 20rpx; font-size: 26rpx;
} color: #999;
.field-th text:nth-child(1){ margin-bottom: 30rpx;
width: 25vh; background-color: #fff;
} }
.field-th text:nth-child(2){ .time-type text{
width: 30vh; padding: 5rpx 25rpx;
border: 1px solid #EFF3F6;
} }
.field-th text:nth-child(3){ .time-type .active{
width: 45vh; background-color: #EFF3F6;
} }
.field-list{
.field{
display: flex; display: flex;
height: 80rpx; height: 80rpx;
} }
.field-list .field-tag{ .field field-right{
width: 25%; display: flex;
font-weight: bold; flex-direction:column;
text-align: center; width: 600rpx;
margin-right: 10rpx;
}
.field .field-tag{
font-size: 24rpx;
color: #fff;
background-color: #488CF0;
padding: 5rpx;
}
.field .field-brand{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx;
color: #ccc;
} }
.field-list .field-proportion{ .field .field-proportion{
width: 30%; width: 30%;
line-height: 80rpx; line-height: 80rpx;
color: #00a2ff; color: #00a2ff;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.field-list .field-brand{ .field .field-brand text{
width: 30%;
}
.field-list .field-brand text{
font-size: 26rpx; font-size: 26rpx;
color: #333333; color: #333333;
display: -webkit-box; display: -webkit-box;
...@@ -208,33 +214,57 @@ page{ ...@@ -208,33 +214,57 @@ page{
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
.field-list .unfold{
font-size: 26rpx;
color: #00a2ff;
padding-left: 20rpx;
line-height: 80rpx;
}
/* 危机复盘 */ /* 危机复盘 */
.article-list{ .article-content{
border: solid 2px #f3f3f3; padding: 0 30rpx;
}
.article{
display: flex; display: flex;
flex-direction: column; margin-top: 30rpx;
margin-top: 25rpx;
padding: 15rpx;
} }
.article-title{ .article .imgBox{
color: #333; 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; font-weight: bold;
margin-bottom: 25rpx; font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article .content .article-source{
position: absolute;
bottom: 0;
left: 0;
font-size: 24rpx;
} }
.article-time{ .article .content .article-time{
position: absolute;
bottom: 0;
right: 0;
font-size: 24rpx;
color: #999; color: #999;
} }
/* 危机报告 */ /* 危机报告 */
.report-first{ .report-container{
padding: 0 30rpx;
}
/* .report-first{
position: relative; position: relative;
width: 100%; width: 100%;
height: 324rpx; height: 324rpx;
...@@ -257,25 +287,24 @@ page{ ...@@ -257,25 +287,24 @@ page{
line-height: 66rpx; line-height: 66rpx;
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
color: #ffffff;font-size: 28rpx; color: #ffffff;font-size: 28rpx;
} } */
.report-list{ .report{
width: 100%;
height: 180rpx;
margin-bottom: 25rpx;
display: flex; display: flex;
margin-top: 30rpx;
} }
.report-list .imgBox { .report .imgBox {
height: 100%; width: 200rpx;
margin-right: 20rpx; height: 144rpx;
margin-right: 30rpx;
} }
.report-list .imgBox image{ .report .imgBox image{
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 5px;
} }
.report-list .content{ .report .content{
position: relative; position: relative;
height: 180rpx; width: 500rpx;
width: 100%;
} }
.content .report-name{ .content .report-name{
position: absolute; position: absolute;
...@@ -286,10 +315,12 @@ page{ ...@@ -286,10 +315,12 @@ page{
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
font-weight: 28rpx;
font-weight: bold;
} }
.content .report-introduction{ .content .report-introduction{
position: absolute; position: absolute;
top: 60rpx; top: 50rpx;
left: 0; left: 0;
color: #999; color: #999;
font-size: 24rpx; font-size: 24rpx;
...@@ -307,11 +338,6 @@ page{ ...@@ -307,11 +338,6 @@ page{
} }
.line-title {
text-align: center;
margin: 30rpx 0;
color: #888888;
}
pages/usercenter/usercenter.wxml
...@@ -38,18 +38,18 @@ ...@@ -38,18 +38,18 @@
<text style="display: block;">我的报告</text> <text style="display: block;">我的报告</text>
</view> </view>
<view class="items" bindtap="todo"> <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> <text style="display: block;">账号权限</text>
</view> </view>
<view class="items" bindtap="todo"> <view class="items" bindtap="todo">
<image src="../../image/account.png" mode="aspectFill" lazy-load="true"></image> <image src="../../image/connect.png" mode="aspectFill" lazy-load="true"></image>
<text style="display: block;">账号管理</text> <text style="display: block;">联系客服</text>
</view> </view>
</view> </view>
</view> </view>
<view wx:if="{{isLogin}}"> <view wx:if="{{isLogin}}">
<button class="logout-btn" bindtap="logout" style="color: red;">退出登录</button> <button class="logout-btn" bindtap="logout">退出登录</button>
</view> </view>
<view wx:else> <view wx:else>
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" class="login-btn">点此登录</button> <button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" class="login-btn">点此登录</button>
......
pages/usercenter/usercenter.wxss
/* pages/usercenter/usercenter.wxss */ /* pages/usercenter/usercenter.wxss */
.usercenter{ .usercenter{
background-color:#e8ebf1; background-color:#F7F7F7;
height:100vh; height:100vh;
} }
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
position: relative; position: relative;
width: 700rpx; width: 700rpx;
height: 200rpx; height: 200rpx;
margin: -100rpx auto;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 10px;
margin: 200rpx auto 50rpx;
box-shadow: 0px 5px 5px #e8e8e8; box-shadow: 0px 5px 5px #e8e8e8;
} }
.userinfo-avatar { .userinfo-avatar {
...@@ -48,9 +48,9 @@ ...@@ -48,9 +48,9 @@
.features{ .features{
width: 700rpx; width: 700rpx;
height: 250rpx; height: 250rpx;
margin: 130rpx auto; margin: -30rpx auto 150rpx;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 10px;
box-shadow: 0px 5px 5px #e8e8e8; box-shadow: 0px 5px 5px #e8e8e8;
} }
...@@ -79,3 +79,13 @@ ...@@ -79,3 +79,13 @@
width: 100rpx; width: 100rpx;
align-items: center; 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