attiya/ebike-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修改首页样式效果

Browse Source
This commit is contained in:
5g0Wp7Zy 2025-07-30 10:55:28 +08:00
parent 0ea119cd1d
commit 0014e7e6cb
2 changed files with 128 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
ebike-maintenance/pages/home/home.css
View File

@ -1,175 +1,174 @@
.divHead { .divHead {
background: #1082FF; background: #1082ff;
height: 75px; height: 75px;
padding-top: 40px; padding-top: 40px;
padding-left: 10px; padding-left: 10px;
font-size: 16px; font-size: 16px;
color: #d8d3d3db; color: #d8d3d3db;
} }
.divHead label { .divHead label {
margin-right: 30px; margin-right: 30px;
padding-bottom: 3px; padding-bottom: 3px;
border-bottom: 2px solid #bdb9b9a1; border-bottom: 2px solid #bdb9b9a1;
} }
.divHeadSel { .divHeadSel {
border-bottom: 2px solid white !important;
border-bottom: 2px solid white !important; font-weight: bold;
font-weight: bold; color: white !important;
color: white !important;
} }
.divTag { .divTag {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
margin-top: 2vh; margin-top: 2vh;
margin-left: 3vw; margin-left: 3vw;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
} }
.divArea { .divArea {
margin-top: 7vh; margin-top: 7vh;
} }
.divbgColor { .divbgColor {
background-color: white; background-color: white;
} }
.mapFont { .mapFont {
color: #6f7777; color: #6f7777;
} }
.divLowerLeft { .divLowerLeft {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
left: 10px; left: 10px;
bottom: 30vh; bottom: 30vh;
} }
.divBtn { .divBtn {
background-color: white; background-color: white;
font-size: 12px; font-size: 12px;
border-radius: 5px; border-radius: 5px;
margin-bottom: 5px; margin-bottom: 5px;
text-align: center; text-align: center;
border: 1px solid #80808061; border: 1px solid #80808061;
} }
.divBtnBlue { .divBtnBlue {
background-color: #0084FF; background-color: #0084ff;
color: white; color: white;
border-radius: 5px; border-radius: 5px;
padding: 5px 15px; padding: 5px 15px;
font-size: 14px; font-size: 14px;
} }
.divLowerLeftMore { .divLowerLeftMore {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 35px; left: 35px;
display: flex; display: flex;
z-index: -1;
overflow: hidden;
} }
.divLowerLeftMoreBtn { .divLowerLeftMoreBtn {
margin-left: 10px; margin-left: 10px;
width: 35px; width: 35px;
text-align: center; text-align: center;
padding: 10px 0px; padding: 10px 0px;
} }
.divBtnTitle { .divBtnTitle {
padding-top: 10px; padding-top: 10px;
} }
.divLowerRight { .divLowerRight {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
right: 10px; right: 10px;
bottom: 30vh; bottom: 30vh;
background-color: white; background-color: white;
border-radius: 5px; border-radius: 5px;
width: 40px; width: 40px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
padding: 10px 5px; padding: 10px 5px;
border: 1px solid #80808061; border: 1px solid #80808061;
} }
.divBottom { .divBottom {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
width: 100%; width: 100%;
z-index: 100; z-index: 100;
padding: 0px 10px; padding: 0px 10px;
} }
.divBottomBack { .divBottomBack {
border-radius: 5px; border-radius: 5px;
background: #ffffffe0; background: #ffffffe0;
padding: 10px 0px; padding: 10px 0px;
border: 1px solid #80808061; border: 1px solid #80808061;
} }
.divQuantity { .divQuantity {
text-align: center; text-align: center;
} }
.divQuantityCount, .divQuantityCount,
.divCount { .divCount {
font-size: 18px; font-size: 18px;
font-weight: bolder; font-weight: bolder;
} }
.divFlex { .divFlex {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
text-align: center; text-align: center;
} }
.divCountLabel { .divCountLabel {
font-size: 14px; font-size: 14px;
} }
.divSlider { .divSlider {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 10px; margin-left: 10px;
font-size: 14px; font-size: 14px;
padding-top: 10px; padding-top: 10px;
} }
.divSliderLable { .divSliderLable {
background-color: #E2F8FF; background-color: #e2f8ff;
border-radius: 15px; border-radius: 15px;
padding: 3px 15px; padding: 3px 15px;
color: #0AB6F9; color: #0ab6f9;
margin-right: 10px; margin-right: 10px;
} }
.wx-value { .wx-value {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
} }
.wx-labal{ .wx-labal {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
} }
.flex-wrapper { .flex-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
} }
.flex-column-wrapper{ .flex-column-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
} }

49
ebike-maintenance/pages/home/home.vue
View File

@ -111,28 +111,37 @@
:color="iconcolor" :color="iconcolor"
:size="iconsize" :size="iconsize"
/> />
<div>更多</div> <div>{{ showMore ? "关闭" : "更多" }}</div>
</div> </div>
</div> </div>
<div v-if="showMore" class="divLowerLeftMore"> <!-- v-if="showMore" -->
<div class="divBtn divLowerLeftMoreBtn" @click="showRegionData"> <div class="divLowerLeftMore">
<uni-icons <uni-transition mode-class="slide-left" :show="showMore">
custom-prefix="iconfont" <div style="display: flex">
type="icon-ebikeP" <div class="divBtn divLowerLeftMoreBtn" @click="showRegionData">
:color="showRegion ? showColor : iconcolor" <uni-icons
:size="iconsize" custom-prefix="iconfont"
/> type="icon-ebikeP"
<div :style="{ color: showRegion ? showColor : iconcolor }">站点</div> :color="showRegion ? showColor : iconcolor"
</div> :size="iconsize"
<div class="divBtn divLowerLeftMoreBtn" @click="showBikeData"> />
<uni-icons <div :style="{ color: showRegion ? showColor : iconcolor }">
custom-prefix="iconfont" 站点
type="icon-ebikedianpingchechongdianzhuang" </div>
:color="showBike ? showColor : iconcolor" </div>
:size="iconsize" <div class="divBtn divLowerLeftMoreBtn" @click="showBikeData">
/> <uni-icons
<div :style="{ color: showBike ? showColor : iconcolor }">车辆</div> custom-prefix="iconfont"
</div> type="icon-ebikedianpingchechongdianzhuang"
:color="showBike ? showColor : iconcolor"
:size="iconsize"
/>
<div :style="{ color: showBike ? showColor : iconcolor }">
车辆
</div>
</div>
</div>
</uni-transition>
</div> </div>
</div> </div>
<div class="divLowerRight"> <div class="divLowerRight">