APP
/
coach_assistant
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add all styke

master
刘嘉炜 4 years ago
parent
3dc241f7f8
commit
7c411af00a
10 changed files with 1182 additions and 1 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. 26
      src/App.vue
  2. 48
      src/pages.json
  3. 111
      src/pages/course/class_change/class_change.vue
  4. 115
      src/pages/course/class_list/class_list.vue
  5. 262
      src/pages/course/list/list.vue
  6. 108
      src/pages/course/roll_call/roll_call.vue
  7. 123
      src/pages/course/student_list/student_list.vue
  8. 244
      src/pages/course/student_review/student_review.vue
  9. 44
      src/pages/message_info/message_info.vue
  10. 102
      src/pages/store_list/store_list.vue

26
src/App.vue
View File

@ -12,7 +12,8 @@
}
</script>
<style>
<style lang="scss">
@import '~style/public.scss';
/*每个页面公共css */
page{
background-color: #f2f2f7;
@ -37,4 +38,27 @@
background-color: rgba(0,0,0,.1);
}
/* btn hover-class */
.top-bar{
padding: 0 26upx;
height: 98upx;
width: 100%;
line-height: 98upx;
font-size: 32upx;
font-weight: 500;
color: #333;
background-color: #fff;
@include textHide(1);
&::after{
content: '';
margin-left: 24upx;
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-left: 16upx solid transparent;
border-right: 16upx solid transparent;
border-top: 16upx solid #333;
}
}
</style>

48
src/pages.json
View File

@ -18,6 +18,54 @@
}
},
{
"path": "pages/message_info/message_info",
"style": {
"navigationBarTitleText": "消息详情"
}
},
{
"path": "pages/store_list/store_list",
"style": {
"navigationBarTitleText": "门店列表"
}
},
{
"path": "pages/course/list/list",
"style": {
"navigationBarTitleText": "我的课程"
}
},
{
"path": "pages/course/class_list/class_list",
"style": {
"navigationBarTitleText": "班级列表"
}
},
{
"path": "pages/course/student_list/student_list",
"style": {
"navigationBarTitleText": "学员列表"
}
},
{
"path": "pages/course/class_change/class_change",
"style": {
"navigationBarTitleText": "学员调班"
}
},
{
"path": "pages/course/student_review/student_review",
"style": {
"navigationBarTitleText": "学员点评"
}
},
{
"path": "pages/course/roll_call/roll_call",
"style": {
"navigationBarTitleText": "点名"
}
},
{
"path": "pages/login/login",
"style": {
}

111
src/pages/course/class_change/class_change.vue
View File

@ -0,0 +1,111 @@
<template>
<view class="class-change">
<view class="cc-user">
<image class="cu-avatar"></image>
<view>Adjoin</view>
<image class="cu-icon"></image>
</view>
<view class="cc-picker">
<picker>
<view>
<input disabled placeholder="请选择班级" />
<image></image>
</view>
</picker>
</view>
<view class="cc-fixed">
<view hover-class="hover-active">确定</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '~style/public.scss';
page{
background-color: #fff;
}
.class-change{
}
.cc-user{
padding: 36upx 24upx 18upx;
@include centerFlex(flex-start);
>image{
flex-grow: 0;
flex-shrink: 0;
background-color: skyblue;
}
.cu-avatar{
margin-right: 32upx;
width: 96upx;
height: 96upx;
border-radius: 50%;
}
.cu-icon{
margin-left: 12upx;
width: 36upx;
height: 36upx;
}
>view{
font-size: 32upx;
font-weight: 500;
line-height: 44upx;
max-width: 70%;
@include textHide(1)
}
}
.cc-picker{
margin-left: auto;
margin-right: 24upx;
width: 574upx;
border-radius: 10upx;
border: 2upx solid #D8D8D8;
view{
padding-left: 40upx;
padding-right: 14upx;
width: 574upx;
height: 84upx;
@include centerFlex(space-between);
>input{
flex-grow: 1;
font-size: 28upx;
color: #333;
height: 100%;
}
>image{
flex-shrink: 0;
margin-left: 20upx;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
}
.cc-fixed{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
padding: 10upx 24upx;
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
>view{
height: 88upx;
line-height: 88upx;
text-align: center;
border-radius: 44upx;
font-size: 32upx;
background-color: $themeColor;
color: #fff;
}
}
</style>

115
src/pages/course/class_list/class_list.vue
View File

@ -0,0 +1,115 @@
<template>
<view class="class-list">
<picker>
<view class="cl-bar"><text>12</text></view>
</picker>
<view class="cl-list">
<view class="cl-item" v-for="i in 10" :key="i">
<view class="ci-name">
<view>二班</view>
<view :class="[i==2?'active':'']">已成班</view>
</view>
<view class="ci-line"><text>学员人数:</text>10人</view>
<view class="ci-btns">
<view hover-class="hover-active">点名</view>
<view hover-class="hover-active">学员</view>
<view hover-class="hover-active">作业</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
.class-list{
}
.cl-bar{
padding: 0 26upx;
height: 98upx;
width: 100%;
line-height: 98upx;
font-size: 32upx;
font-weight: 500;
color: #333;
background-color: #fff;
@include textHide(1);
&::after{
content: '';
margin-left: 24upx;
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-left: 16upx solid transparent;
border-right: 16upx solid transparent;
border-top: 16upx solid #333;
}
}
.cl-list{
padding: 24upx;
.cl-item{
margin-bottom: 24upx;
padding: 24upx;
border-radius: 10upx;
background-color: #fff;
.ci-name{
@include centerFlex(space-between);
>view{
&:first-child{
flex-grow: 1;
line-height: 44upx;
font-weight: 500;
font-size: 32upx;
color: #333;
@include textHide(1);
}
&+view{
flex-shrink: 0;
margin-left: 20upx;
line-height: 40upx;
font-size: 28upx;
color: $themeColor;
&.active{
color: #FF4444;
}
}
}
}
.ci-line{
margin-bottom: 28upx;
font-size: 28upx;
line-height: 52upx;
color: #333;
@include textHide(1);
>text{
margin-right: 52upx;
color: #9A9A9D;
}
}
.ci-btns{
@include centerFlex(flex-end);
>view{
width: 160upx;
height: 72upx;
line-height: 72upx;
text-align: center;
border-radius: 36upx;
font-size: 28upx;
background-color: $themeColor;
color: #fff;
&:not(:first-child){
margin-left: 24upx;
}
}
}
}
}
</style>

262
src/pages/course/list/list.vue
View File

@ -0,0 +1,262 @@
<template>
<view class="course-list">
<view class="cl-tab">
<view>正式课</view>
<view class="active">体验课</view>
</view>
<view class="cl-list">
<view class="cl-item" v-for="i in 10" :key="i">
<view class="ci-name">
<view>羽毛球课包学会(带体验课)</view>
<view>训练课</view>
</view>
<view class="ci-lines">
<text>班级数: </text>10
</view>
<view class="ci-lines">
<text>班级数: </text>10
</view>
<view class="cl-btns">
<view>预约上课</view>
<view>班级</view>
</view>
</view>
</view>
<view class="cl-mask">
<view class="cl-modal">
<view class="cm-line">
<view>选择班级</view>
<picker>
<view class="cl-frame">
<input disabled placeholder="请选择班级" />
<image></image>
</view>
</picker>
</view>
<view class="cm-line">
<view>选择日期</view>
<picker mode="date">
<view class="cl-frame">
<input disabled placeholder="请选择日期" />
<image></image>
</view>
</picker>
</view>
<view class="cm-line">
<view>选择时间</view>
<view class="cl-content">
<picker mode="time">
<view class="cc-frame">
<input disabled placeholder="请选择时间"/>
<image></image>
</view>
</picker>
<view>-</view>
<picker mode="time">
<view class="cc-frame">
<input disabled placeholder="请选择时间"/>
<image></image>
</view>
</picker>
</view>
</view>
<view class="cm-btns">
<view hover-class="hover-active">取消</view>
<view hover-class="hover-active">确定</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
.course-list{
}
.cl-tab{
height: 96upx;
background-color: #fff;
@include centerFlex(space-around);
>view{
width: 160upx;
height: 64upx;
line-height: 64upx;
text-align: center;
border-radius: 32upx;
font-size: 32upx;
font-weight: 500;
color: #333;
&.active{
background-color: $themeColor;
color: #fff;
}
}
}
.cl-list{
padding: 24upx;
.cl-item{
margin-bottom: 24upx;
padding: 30upx 20upx;
border-radius: 10upx;
background-color: #fff;
.ci-name{
margin-bottom: 10upx;
@include centerFlex(space-between);
>view{
&:first-child{
flex-grow: 1;
line-height: 44upx;
font-weight: 500;
font-size: 32upx;
color: #333;
@include textHide(1);
}
&:nth-child(2){
flex-shrink: 0;
margin-left: 10upx;
font-size: 28upx;
line-height: 40upx;
color: #333;
}
}
}
.ci-lines{
margin-bottom: 10upx;
line-height: 52upx;
font-size: 28upx;
color: #333;
@include textHide(1);
>text{
margin-right: 12upx;
color: #9A9A9D;
}
}
.cl-btns{
@include centerFlex(flex-end);
>view{
width: 192upx;
height: 72upx;
text-align: center;
line-height: 72upx;
border-radius: 36upx;
font-size: 28upx;
font-weight: 500;
background-color: $themeColor;
color: #fff;
&:not(:first-child){
margin-left: 24upx;
}
}
}
}
}
.cl-mask{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba($color: #000000, $alpha: .5);
}
.cl-modal{
position: absolute;
left: 50%;
top: 50%;
width: 660upx;
transform: translate(-50%, -50%);
border-radius: 10upx;
padding: 50upx 34upx;
background-color: #fff;
.cm-line{
margin-bottom: 24upx;
@include centerFlex(flex-start);
>view:first-child{
flex-shrink: 0;
flex-grow: 0;
margin-right: 14upx;
line-height: 40upx;
font-size: 28upx;
color: #333;
}
.cl-frame{
padding: 0 26upx;
width: 460upx;
height: 88upx;
border: 2upx solid #D8D8D8;
border-radius: 10upx;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 28upx;
color: #333;
}
>image{
margin-left: 20upx;
flex-shrink: 0;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
.cl-content{
width: 460upx;
@include centerFlex(space-between);
>view{
line-height: 40upx;
font-size: 28upx;
color: #9a9a9d;
}
.cc-frame{
padding: 0 12upx;
height: 88upx;
width: 212upx;
border: 2upx solid #D8D8D8;
border-radius: 10upx;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 28upx;
color: #333;
}
>image{
margin-left: 20upx;
flex-shrink: 0;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
}
}
.cm-btns{
@include centerFlex(center);
>view{
margin: 0 14upx;
height: 88upx;
width: 240upx;
line-height: 84upx;
text-align: center;
border-radius: 44upx;
border: 2upx solid #D8D8D8;
font-size: 32upx;
color: #9A9A9D;
&+view{
background-color: $themeColor;
border-color: $themeColor;
color: #fff;
}
}
}
}
</style>

108
src/pages/course/roll_call/roll_call.vue
View File

@ -0,0 +1,108 @@
<template>
<view class="roll-call">
<picker>
<view class="top-bar"><text>12</text></view>
</picker>
<view class="rc-time">
<view>课程时间: 2020/12/19 13:00~14:15</view>
<view>5/2</view>
</view>
<view class="rc-list">
<view class="rl-item">
<view class="ri-selected"></view>
<image class="ri-avatar"></image>
<view class="ri-content">
<view class="rc-info">
</view>
<view class="rc-tip">
<view>剩余次数: 10次</view>
<view>未点名</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
.roll-call{
}
.rc-time{
padding: 0 24upx;
margin-bottom: 24upx;
height: 100upx;
border-top: 2upx solid #D8D8D8;
background-color: #fff;
@include centerFlex(space-between);
>view{
font-size: 32upx;
color: #9a9a9d;
&:first-child{
flex-grow: 1;
@include textHide(1);
}
&+view{
flex-shrink: 0;
max-width: 20%;
@include textHide(1);
}
}
}
.rc-list{
}
.rl-item{
padding: 54upx 24upx;
margin-bottom: 24upx;
background-color: #fff;
@include centerFlex(flex-start);
.ri-selected{
flex-shrink: 0;
margin-right: 26upx;
width: 40upx;
height: 40upx;
background-color: skyblue;
}
.ri-avatar{
flex-shrink: 0;
flex-grow: 0;
margin-right: 20upx;
width: 116upx;
height: 116upx;
border-radius: 50%;
background-color: skyblue;
}
.ri-content{
flex-grow: 1;
.rc-tip{
@include centerFlex(space-between);
>view{
@include textHide(1);
&:first-child{
flex-grow: 1;
font-size: 24upx;
line-height: 34upx;
color: #9a9a9d;
}
&+view{
margin-left: 20upx;
max-width: 26%;
flex-shrink: 0;
font-weight: 500;
font-size: 28upx;
color: $themeColor;
}
}
}
}
}
</style>

123
src/pages/course/student_list/student_list.vue
View File

@ -0,0 +1,123 @@
<template>
<view class="student-list">
<picker>
<view class="top-bar"><text>12</text></view>
</picker>
<view class="sl-list">
<view class="sl-item" v-for="i in 10" :key="i">
<view class="si-content">
<image></image>
<view>
<view class="sc-info">
<view class="si-name">
<view>Adjoin</view>
<image></image>
</view>
<view class="si-phone">
<view>123453</view>
<image></image>
</view>
</view>
<view class="sc-lave">剩余次数: 10次</view>
</view>
</view>
<view class="si-btns">
<view hover-class="hover-active">点评</view>
<view hover-class="hover-active">调班</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import '~style/public.scss';
.student-list{
}
.sl-list{
padding: 24upx;
.sl-item{
margin-bottom: 24upx;
padding: 46upx 24upx 28upx;
border-radius: 10upx;
background-color: #fff;
.si-content{
margin-bottom: 16upx;
@include centerFlex(space-between);
>image{
flex-shrink: 0;
flex-grow: 0;
margin-right: 20upx;
width: 116upx;
height: 116upx;
border-radius: 50%;
background-color: skyblue;
}
>view{
flex-grow: 1;
.sc-info{
margin-bottom: 12upx;
@include centerFlex(space-between);
.si-name,.si-phone{
max-width: 50%;
flex-grow: 1;
@include centerFlex(flex-start);
>view{
font-size: 28upx;
font-weight: 500;
line-height: 44upx;
color: #333;
@include textHide(1);
}
>image{
flex-shrink: 0;
flex-grow: 0;
width: 34upx;
height: 34upx;
margin-left: 14upx;
background-color: skyblue;
}
}
.si-phone{
justify-content: flex-end;
>view{
text-align: right;
font-weight: 400;
}
}
}
.sc-lave{
line-height: 34upx;
font-size: 24upx;
color: #9a9a9d;
@include textHide(1);
}
}
}
.si-btns{
@include centerFlex(flex-end);
>view{
width: 160upx;
height: 72upx;
text-align: center;
line-height: 72upx;
border-radius: 36upx;
font-size: 28upx;
font-weight: 500;
background-color: $themeColor;
color: #fff;
&:not(:first-child){
margin-left: 24upx;
}
}
}
}
}
</style>

244
src/pages/course/student_review/student_review.vue
View File

@ -0,0 +1,244 @@
<template>
<view class="student-review">
<view class="sr-section">
<view class="ss-name">
<view>羽毛球课包学会(带体验课)</view>
<view>一班</view>
</view>
<view class="ss-user">
<view>学员名称:</view>
<picker class="su-picker">
<view>
<input disabled placeholder="选择姓名" />
<image></image>
</view>
</picker>
</view>
<view class="ss-review">
<view>学员点评:</view>
<view>
<textarea placeholder="请输入您的点评、建议或者发现的问题"></textarea>
</view>
</view>
<view class="ss-title">
<text>上传照片</text>
(最多上传3张，只支持.jpg、png 格式）
</view>
<view class="ss-pics">
<view class="sp-item" v-for="i in 5" :key="i">
<image class="si-close"></image>
<image class="si-img"></image>
</view>
<view class="sp-item sp-add">
<view></view>
<view>上传照片</view>
</view>
</view>
</view>
<view class="sr-fixed">
<view hover-class="hover-active">确定</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
.student-review{
padding-bottom: 108upx;
padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}
.sr-section{
background-color: #fff;
padding: 0 26upx;
.ss-name{
padding: 48upx 0 36upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
line-height: 44upx;
font-weight: 500;
font-size: 32upx;
color: #333;
&+view{
margin-left: 20upx;
flex-shrink: 0;
}
&:first-child{
flex-grow: 1;
@include textHide(1);
}
}
}
.ss-user{
padding: 16upx 0 24upx;
@include centerFlex(flex-start);
>view{
&:first-child{
margin-right: 22upx;
line-height: 40upx;
font-size: 28upx;
color: #9a9a9d;
}
}
.su-picker{
width: 312upx;
border: 2upx solid #D8D8D8;
border-radius: 10upx;
background-color: #F2F2F7;
view{
padding: 0 28upx;
height: 68upx;
@include centerFlex(space-between);
}
input{
flex-grow: 1;
font-size: 28upx;
color: #333;
}
image{
margin-left: 16upx;
flex-shrink: 0;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
}
.ss-review{
display: flex;
padding-bottom: 24upx;
border-bottom: 2upx solid #D8D8D8;
>view{
&:first-child{
flex-shrink: 0;
margin-right: 22upx;
font-size: 28upx;
line-height: 40upx;
color: #333;
}
&+view{
padding: 30upx;
flex-grow: 1;
height: 226upx;
border-radius: 10upx;
border: 2upx solid #D8D8D8;
>textarea{
width: 100%;
height: 100%;
line-height: 40upx;
font-size: 28upx;
color: #333;
}
}
}
}
.ss-title{
padding: 16upx 0 20upx;
font-size: 24upx;
line-height: 44upx;
color: #9a9a9d;
>text{
font-size: 32upx;
color: #333;
}
}
.ss-pics{
padding-bottom: 62upx;
font-size: 0;
.sp-item{
position: relative;
display: inline-block;
margin-bottom: 24upx;
width: 200upx;
height: 200upx;
border-radius: 10upx;
background-color: greenyellow;
overflow: hidden;
&:not(:nth-child(3n)){
margin-right: 44upx;
}
.si-close{
position: absolute;
right: 6upx;
top: 6upx;
z-index: 2;
width: 40upx;
height: 40upx;
background-color: skyblue;
}
.si-img{
width: 100%;
height: 100%;
background-color: royalblue;
}
&.sp-add{
padding-top: 36upx;
>view{
&:first-child{
position: relative;
margin: 0 auto 30upx;
width: 60upx;
height: 60upx;
background-color: springgreen;
&::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
width: 60upx;
height: 4upx;
background-color: #D8D8D8;
}
&::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
width: 4upx;
height: 60upx;
background-color: #D8D8D8;
}
}
&+view{
text-align: center;
line-height: 40upx;
font-size: 28upx;
color: #9a9a9d;
}
}
}
}
}
}
.sr-fixed{
position: fixed;
left: 0;
bottom: 0;
padding: 10upx 24upx;
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
width: 100%;
background-color: #fff;
>view{
height: 88upx;
line-height: 88upx;
text-align: center;
font-size: 32upx;
border-radius: 44upx;
background-color: $themeColor;
color: #fff;
}
}
</style>

44
src/pages/message_info/message_info.vue
View File

@ -0,0 +1,44 @@
<template>
<view class="message-info">
<view class="mi-title">欧轩智能商家助手上线啦</view>
<view class="mt-time">2020/11/23</view>
<view class="mt-content">
<text> 出去就像是想和是想和想去市区秀嘘嘘和文化文物 i 和芜湖 u哦哦无所谓 i 睡觉哇想你看我看完我忘记我看拳脚交加没清醒就没去现场希望开学前去想你亲亲就像是想和是想和想去市区秀嘘嘘和文化文物 i 和芜湖 u哦哦无所谓 i 睡觉哇想你看我看完我忘记我看拳脚交加没清醒就没去现场希望开学才说得出设身处地千秋万代事情都是</text>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
page{
background-color: #fff;
}
.message-info{
padding: 44upx 24upx;
.mi-title{
margin-bottom: 10upx;
line-height: 52upx;
font-size: 38upx;
font-weight: 500;
color: #333;
}
.mt-time{
margin-bottom: 38upx;
line-height: 40upx;
font-size: 28upx;
color: #9a9a9d;
}
.mt-content{
line-height: 40upx;
word-break: break-all;
font-size: 28upx;
color: #9a9a9d;
}
}
</style>

102
src/pages/store_list/store_list.vue
View File

@ -0,0 +1,102 @@
<template>
<view class="store-list">
<view class="sl-item" v-for="i in 10" :key="i">
<image class="si-logo"></image>
<view class="si-content">
<view class="sc-top">
<view>欧轩智能场馆(羽毛球永泰店)</view>
<image></image>
</view>
<view :class="['sc-tag', i==2?'active':'']"><text>正常营业</text></view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
page{
background-color: #fff;
}
.store-list{
padding-bottom: 20upx;
padding-bottom: calc( 20upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc( 20upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}
.sl-item{
padding-left: 20upx;
@include centerFlex(space-between);
>.si-logo{
flex-grow: 0;
flex-shrink: 0;
margin-right: 48upx;
width: 100upx;
height: 100upx;
border-radius: 50%;
border: 2upx solid #D8D8D8;
background-color: skyblue;
}
.si-content{
flex-grow: 1;
padding: 40upx 0;
padding-right: 26upx;
border-bottom: 2upx solid #D8D8D8;
font-size: 0;
.sc-top{
margin-bottom: 24upx;
@include centerFlex(space-between);
>view{
height: 44upx;
line-height: 44upx;
flex-grow: 1;
font-weight: 500;
font-size: 32upx;
color: #333;
@include textHide(1);
}
>image{
flex-shrink: 0;
flex-grow: 0;
height: 32upx;
width: 32upx;
background-color: skyblue;
}
}
.sc-tag{
display: inline-block;
padding: 0 14upx;
height: 28upx;
line-height: 24upx;
text-align: center;
font-size: 20upx;
color: $themeColor;
border: 2upx solid $themeColor;
border-radius: 14upx;
&::before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: 12upx;
width: 8upx;
height: 8upx;
border-radius: 50%;
background-color: $themeColor;
}
&.active{
color: #FF4444;
border-color: #FF4444;
&::before{
background-color: #FF4444;
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save