yxt_product
/
yxt-yythmall-ui-miniprogram
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式整理

master
yxt_njy 1 year ago
parent
93492d03f1
commit
4b9537e675
1 changed files with 92 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 133
      pages/home/myCellar.vue

133
pages/home/myCellar.vue
View File

@ -1,27 +1,16 @@
<template>
<view
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<view id="page">
<!-- 顶部 -->
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
</view>
<view style="background: #fff; height: calc(100vh - 45px - 50vw);width: 100%; border-radius: 15px;display: flex;flex-direction: column; box-sizing: border-box;margin-top: -15px;box-sizing: border-box;">
<!-- <view style="display: flex;flex-direction: row;height: 25px; width: 100%; flex-shrink: 0;">
<view style="width: 20%;background: #F7F7F7;border-top-left-radius: 25px;"></view>
<view style="width: 80%;background: #fff; border-top-right-radius: 25px;"></view>
</view> -->
<!-- 功能区 -->
<view class="func-area">
<view class="center">
<!-- 左侧菜单 -->
<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
<!-- 左侧菜单区 -->
<view class="menu-area">
<!-- <text style="font-weight: 600;font-family: sans-serif;
color: #333;
font-size: 15px;
@ -50,16 +39,20 @@
</view>
</scroll-view> -->
<!-- 左侧菜单列表 -->
<view style="width: 100%;display: flex;flex-direction: column; ">
<view v-for="(item,index) in data" @click="labelClick(index,item)" style="display: flex;flex-direction: column;justify-content: center;">
<text class="label" :class="{'label2':selectIndex==index}">{{item.name}}</text>
<scroll-view scroll-y="true" style="height: 100%; width: 100%;border-bottom-left-radius: 25px;"
:scroll-top="scrollLeftTop" bindscrolltoupper="upper" bindscrolltolower="lower"
:show-scrollbar="false" :enhanced="true" bindscroll="scroll">
<view class="menu">
<view v-for="(item,index) in data" @click="labelClick(index,item)" class="method">
<text class="label" :class="{'label-selected':selectIndex==index}">{{item.name}}</text>
<view v-if="item.count>0" class="goods-count">{{item.count}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view style="width: 78%;background-color: #fff;overflow-y: auto;">
<scroll-view scroll-y="true" style="height: 100%; width: 100%;" bindscrolltoupper="upper"
bindscrolltolower="lower" bindscroll="scroll" :show-scrollbar="false"
@ -531,6 +524,14 @@
</script>
<style>
#page{
display: flex;
flex-direction: column;
height: 100vh;
background: -webkit-linear-gradient(left,#FEA65F,#FB9440);
}
/* 顶部 */
.top {
width: 100vw;
/* height: 126.66vw; */
@ -541,25 +542,43 @@
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
/* .label {
background: #fff;
color: #FF9900;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
/* 功能区 */
.func-area{
background: #fff;
height: calc(100vh - 45px - 50vw);
width: 100%;
border-radius: 15px;
display: flex;
flex-direction: column;
box-sizing: border-box;
margin-top: -15px;
box-sizing: border-box;
}
.label2 {
/* 功能区-菜单区 */
.func-area .menu-area{
width: 22%;
display: flex;
flex-direction: column;
overflow-y: auto;
padding-top: 10px;
}
background: #FF9900;
color: #fff;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
} */
.label {
/* 功能区-菜单区-菜单 */
.func-area .menu-area .menu{
width: 100%;
display: flex;
flex-direction: column;
}
/* 功能区-菜单区-菜单-显示方法 */
.func-area .menu-area .menu .method{
display: flex;
flex-direction: column;
justify-content: center;
}
/* 功能区-菜单区-菜单-标签 */
.func-area .menu-area .menu .label{
color: #191919;
font-size: 12px;
margin-top: 10px;
@ -569,7 +588,8 @@
padding-bottom: 7px;
margin-left: 5px;
}
.label2 {
/* 功能区-菜单区-菜单-标签选中 */
.func-area .menu-area .menu .label-selected{
background: #FFF;
color: #FFF;
background-color: #FF9900;
@ -583,6 +603,37 @@
border-radius: 20px;
margin-left: 5px;
}
/* 功能区-菜单区-菜单-商品数量 */
.func-area .menu-area .menu .goods-count{
border-radius: 50%;
text-align: center;
background: #f00;
color: #fff;
font-size: 8px;
position: absolute;
top: 8px;
right: 3px;
padding: 2px 5px;
width: auto;
}
/* .label {
background: #fff;
color: #FF9900;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
.label2 {
background: #FF9900;
color: #fff;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
} */
.center {
display: flex;
flex-direction: row;

Write Preview
Loading…
Cancel
Save