提交 b8bc87b0 编写于 作者: Y yurj26

feat: update style

上级 8e20dcc0
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
margin-top: 10rpx; margin-top: 10rpx;
font-size: 24rpx; font-size: 24rpx;
color: #888; color: #888;
font-weight: 500;
} }
.uni-common-mb { .uni-common-mb {
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
.uni-hello-text { .uni-hello-text {
color: #7A7E83; color: #7A7E83;
line-height: 22px;
} }
.uni-list { .uni-list {
...@@ -42,6 +44,7 @@ ...@@ -42,6 +44,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 30rpx;
} }
.uni-list-cell { .uni-list-cell {
...@@ -52,12 +55,16 @@ ...@@ -52,12 +55,16 @@
align-items: center; align-items: center;
} }
.uni-list-cell-line {
border-bottom: 1px solid #c8c7cc;
}
.uni-list-cell-hover { .uni-list-cell-hover {
background-color: #eee; background-color: #eee;
} }
.uni-list-cell-pd { .uni-list-cell-pd {
padding: 22rpx 30rpx; padding: 22rpx 30rpx 22rpx 0;
} }
.uni-list-cell-left { .uni-list-cell-left {
......
import App from './App' import App from './App'
import PageHead from './components/page-head/page-head'
import ULink from './components/u-link/u-link'
import { createSSRApp } from 'vue' import { createSSRApp } from 'vue'
export function createApp() { export function createApp() {
const app = createSSRApp(App) const app = createSSRApp(App)
app.component('page-head', PageHead)
app.component('u-link', ULink)
return { return {
app app
} }
......
...@@ -65,8 +65,7 @@ ...@@ -65,8 +65,7 @@
} }
.button-sp-area { .button-sp-area {
/* margin: 0 auto; */ margin: 0 auto;
padding: 0 20%;
width: 60%; width: 60%;
} }
......
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
</view> </view>
<view class="uni-list"> <view class="uni-list">
<checkbox-group @change="checkboxChange"> <checkbox-group @change="checkboxChange">
<view class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value"> <view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line': ''">
<view> <view>
<checkbox :value="item.value" :checked="item.checked">{{item.name}}</checkbox> <checkbox :value="item.value" :checked="item.checked">{{item.name}}</checkbox>
</view> </view>
......
...@@ -33,7 +33,8 @@ ...@@ -33,7 +33,8 @@
</view> </view>
<view class="uni-list"> <view class="uni-list">
<radio-group @change="radioChange"> <radio-group @change="radioChange">
<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"> <view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line': ''">
<view> <view>
<radio :value="item.value" :checked="index === current">{{item.name}}</radio> <radio :value="item.value" :checked="index === current">{{item.name}}</radio>
</view> </view>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<view class="uni-title uni-common-mt"> <view class="uni-title uni-common-mt">
<text class="uni-title-text"> <text class="uni-title-text">
column flex-direction: column
</text> </text>
<text class="uni-subtitle-text"> <text class="uni-subtitle-text">
纵向布局 纵向布局
...@@ -78,14 +78,14 @@ ...@@ -78,14 +78,14 @@
<view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view> <view class="text-box" style="width: 200rpx;"><text class="text">固定宽度</text></view>
</view> </view>
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;"> <view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
<view class="text-box" style="width: 280rpx;"><text class="text">一行显示不全,wrap折行</text></view> <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
<view class="text-box" style="width: 280rpx;"><text class="text">一行显示不全,wrap折行</text></view> <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
<view class="text-box" style="width: 280rpx;"><text class="text">一行显示不全,wrap折行</text></view> <view class="text-box" style="width: 320rpx;"><text class="text">一行显示不全,wrap折行</text></view>
</view> </view>
<view class="uni-flex uni-row"> <view class="uni-flex uni-row">
<view class="text-box" <view class="text-box"
style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;"> style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
<text class="text">垂直居顶</text> <text class="text" style="line-height: 70rpx;">垂直居顶</text>
</view> </view>
<view class="text-box" <view class="text-box"
style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;"> style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
</view> </view>
<view class="text-box" <view class="text-box"
style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;"> style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
<text class="text">垂直居底</text> <text class="text" style="line-height: 70rpx;">垂直居底</text>
</view> </view>
</view> </view>
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
<view class="text-box" <view class="text-box"
style="height: 120rpx;justify-content: start;align-items: start;padding-left: 20rpx;"> style="height: 120rpx;justify-content: start;align-items: start;padding-left: 20rpx;">
<text class="text">文字居左,留出左间距</text> <text class="text" style="line-height: 70rpx;">文字居左,留出左间距</text>
</view> </view>
<view class="uni-flex uni-row"> <view class="uni-flex uni-row">
...@@ -167,7 +167,6 @@ ...@@ -167,7 +167,6 @@
} }
.text { .text {
line-height: 70rpx;
color: #777; color: #777;
font-size: 26rpx; font-size: 26rpx;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册