topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

整体修改组件样式名称

This commit is contained in:
TOP糯米 2023-02-25 16:03:13 +08:00
parent 03c8c38bf2
commit c698a76016
18 changed files with 268 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/auth/agreement.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="agreement">
<view class="component-auth-agreement">
<view @click="changeState">
<widget-check-box :checked="state" />
</view>
@ -14,7 +14,7 @@
<script>
import WidgetCheckBox from "@/components/widgets/checkbox";
export default {
name: "auth-agreement",
name: "component-auth-agreement",
data() {
return {
state: false,
@ -44,7 +44,7 @@ export default {
</script>
<style lang="less" scoped>
.agreement {
.component-auth-agreement {
width: 100%;
display: flex;
align-items: flex-start;

4
src/components/auth/login.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="login-box" v-if="showLoginModal">
<view class="component-auth-login" v-if="showLoginModal">
<button open-type="getUserInfo" @click="getUserInfo">授权登录</button>
</view>
</template>
@ -32,7 +32,7 @@ export default {
</script>
<style lang="less" scoped>
.login-box {
.component-auth-login {
z-index: 25;
position: absolute;
top: 0;

53
src/components/banner/banner.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="swiper-container">
<view class="component-banner">
<swiper
class="swiper"
circular
@ -71,35 +71,36 @@ export default {
</script>
<style lang="less" scoped>
.swiper-container {
.component-banner {
position: relative;
}
.swiper-container,
.swiper,
.swiper-item {
width: 100%;
height: 100%;
}
.swiper-dots {
position: absolute;
left: 0;
right: 0;
bottom: 10rpx;
text-align: center;
.swiper-dot-item {
display: inline-block;
margin: 0 6rpx;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #cacaca;
.swiper,
.swiper-item {
width: 100%;
height: 100%;
}
.swiper-dot-item.active {
background: #f9b05f;
.swiper-dots {
position: absolute;
left: 0;
right: 0;
bottom: 10rpx;
text-align: center;
.swiper-dot-item {
display: inline-block;
margin: 0 6rpx;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #cacaca;
}
.swiper-dot-item.active {
background: #f9b05f;
}
}
.banner-image {
width: 100%;
height: 100%;
}
}
.banner-image {
width: 100%;
height: 100%;
}
</style>

114
src/components/cate/cate.vue
View File

@ -1,22 +1,22 @@
<template>
<view class="component-wrap" :style="{ height: wrapHeight + 'px' }">
<view class="component-menu-wrap">
<view class="component-cate" :style="{ height: wrapHeight + 'px' }">
<view class="menu-wrap">
<scroll-view
scroll-y
class="component-tab-view menu-scroll-view"
class="tab-view menu-scroll-view"
:scroll-top="scrollTop"
:scroll-into-view="itemId"
:enhanced="true"
:bounces="false"
>
<view
class="component-tab-item"
class="tab-item"
v-for="(item, index) in data"
:key="index"
:class="[current == index ? 'component-tab-item-active' : '']"
:class="[current == index ? 'tab-item-active' : '']"
@tap.stop="swichMenu(index)"
>
<text class="component-line-1">{{ item.name }}</text>
<text class="line-1">{{ item.name }}</text>
</view>
</scroll-view>
<scroll-view
@ -251,62 +251,56 @@ export default {
</script>
<style lang="less" scoped>
.component-wrap {
.component-cate {
display: flex;
flex-direction: column;
width: 100%;
}
.component-search-box {
padding: 18rpx 30rpx;
}
.component-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.component-tab-view {
width: 200rpx;
height: 100%;
background-color: #f6f6f6;
}
.component-tab-item {
height: 100rpx;
box-sizing: border-box;
padding-left: 20rpx;
display: flex;
align-items: center;
font-size: 24rpx;
color: #8b8b8b;
font-weight: 400;
line-height: 1;
}
.component-tab-item-active {
position: relative;
color: #4b65ed;
background: #ffffff;
}
.component-tab-item-active::before {
content: "";
position: absolute;
border-left: 4px solid #4b65ed;
height: 24rpx;
left: 0;
top: 38rpx;
}
.component-tab-view {
height: 100%;
}
.right-box {
width: 550rpx;
}
.page-view.cate {
padding-right: 16rpx;
}
.page-view.list {
padding-right: 0;
}
.class-item {
background-color: #ffffff;
padding: 36rpx 32rpx 0 32rpx;
.menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.tab-view {
width: 200rpx;
height: 100%;
background-color: #f6f6f6;
.tab-item {
height: 100rpx;
box-sizing: border-box;
padding-left: 20rpx;
display: flex;
align-items: center;
font-size: 24rpx;
color: #8b8b8b;
font-weight: 400;
line-height: 1;
}
.tab-item-active {
position: relative;
color: #4b65ed;
background: #ffffff;
}
.tab-item-active::before {
content: "";
position: absolute;
border-left: 4px solid #4b65ed;
height: 24rpx;
left: 0;
top: 38rpx;
}
}
.right-box {
width: 550rpx;
.page-view.cate {
padding-right: 16rpx;
}
.page-view.list {
padding-right: 0;
}
.class-item {
background-color: #ffffff;
padding: 36rpx 32rpx 0 32rpx;
}
}
}
</style>

72
src/components/cate/template/cate.vue
View File

@ -1,5 +1,5 @@
<template>
<view>
<view class="component-cate-template-cate">
<view class="item-title">
<text>{{ data.name }}</text>
</view>
@ -37,39 +37,41 @@ export default {
</script>
<style lang="less" scoped>
.item-title {
font-size: 26rpx;
line-height: 26rpx;
color: #010101;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 130rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 40rpx;
margin-right: 40rpx;
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #d8d8d8;
}
.item-menu-name {
margin-top: 15rpx;
font-weight: normal;
color: #333333;
font-size: 24rpx;
.component-cate-template-cate {
.item-title {
font-size: 26rpx;
line-height: 26rpx;
color: #010101;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 130rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 40rpx;
margin-right: 40rpx;
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #d8d8d8;
}
.item-menu-name {
margin-top: 15rpx;
font-weight: normal;
color: #333333;
font-size: 24rpx;
}
}
</style>

46
src/components/cate/template/list.vue
View File

@ -1,5 +1,5 @@
<template>
<view>
<view class="component-cate-template-list">
<view class="item-title">
<text>{{ data.name }}</text>
</view>
@ -42,28 +42,30 @@ export default {
</script>
<style lang="less" scoped>
.item-title {
font-size: 26rpx;
line-height: 26rpx;
color: #8b8b8b;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
position: relative;
width: 100%;
margin-top: 40rpx;
.component-cate-template-list {
.item-title {
font-size: 26rpx;
line-height: 26rpx;
color: #8b8b8b;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
position: relative;
width: 100%;
margin-top: 40rpx;
.component-add {
position: absolute;
right: 0;
bottom: 8rpx;
.component-add {
position: absolute;
right: 0;
bottom: 8rpx;
}
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
</style>

6
src/components/order/action.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="order-action">
<view class="component-order-action">
<block
v-if="
order.state == models.order.state.NO_PAY ||
@ -36,7 +36,7 @@
<script>
export default {
name: "order-action",
name: "component-order-action",
data() {
return {
models: this.$models,
@ -73,7 +73,7 @@ export default {
</script>
<style lang="less" scoped>
.order-action {
.component-order-action {
width: 100%;
display: flex;
align-items: center;

92
src/components/order/item.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="order-item" @click="toDetail">
<view class="component-order-item" @click="toDetail">
<view class="order-header">
<view class="state-text" :style="{ color: models.order.getOrderStateTextColor(order.state) }">
<text>{{ models.order.getOrderStateText(order.state) }}</text>
@ -10,28 +10,28 @@
</view>
</view>
<view class="order-body">
<view class="row">
<view class="order-desc-row">
<text class="title">订单编号：</text>
<text class="text">{{ order.orderId }}</text>
<text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
</view>
<view class="row">
<view class="order-desc-row">
<text class="title">服务分类：</text>
<text class="text">{{ order.cate }}</text>
</view>
<view class="row limit-line clamp-1">
<view class="order-desc-row limit-line clamp-1">
<text class="title">需求内容：</text>
<text class="text">{{ order.explain }}</text>
</view>
<view class="row">
<view class="order-desc-row">
<text class="title">下单时间：</text>
<text class="text">{{ order.createTime }}</text>
</view>
<view class="row">
<view class="order-desc-row">
<text class="title">服务时间：</text>
<text class="text">{{ order.serviceTime }}</text>
</view>
<view class="worker-box">
<view class="order-worker-box">
<block
v-if="
order.orderType == models.order.type.NORMAL ||
@ -52,7 +52,7 @@
</view>
</view>
<view class="more-worker">
<text class="text">{{ order.workerList.length }}位师傅已报价</text>
<text class="worker-num">{{ order.workerList.length }}位师傅已报价</text>
<text class="iconfont icon-jinru"></text>
</view>
</view>
@ -68,7 +68,7 @@
<script>
import WorkerItem from "@/components/worker/item";
export default {
name: "order-order-item",
name: "component-order-item",
data() {
return {
models: this.$models,
@ -120,7 +120,7 @@ export default {
</script>
<style lang="less" scoped>
.order-item {
.component-order-item {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
@ -148,12 +148,12 @@ export default {
margin-left: 8rpx;
}
}
}
.order-body {
width: 100%;
border-bottom: 2rpx solid #e8e7e7;
padding: 18rpx 0;
.row {
.order-body {
width: 100%;
border-bottom: 2rpx solid #e8e7e7;
padding: 18rpx 0;
}
.order-desc-row {
position: relative;
width: 100%;
font-size: 28rpx;
@ -170,33 +170,34 @@ export default {
margin-left: 24rpx;
}
}
.row:last-child {
.order-desc-row:last-child {
margin-bottom: 0;
}
.worker-box {
.order-worker-box {
width: 100%;
}
}
.order-footer {
width: 100%;
}
.worker-list-group {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 20rpx 0 10rpx 0;
.list-group {
display: flex;
.worker-item-box {
width: 100%;
padding: 20rpx 0 10rpx 0;
}
.list-item:first-child {
margin-left: 0;
}
.list-item {
.worker-list-group {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
margin-left: 36rpx;
justify-content: space-between;
align-items: flex-end;
padding: 20rpx 0 10rpx 0;
.list-group {
display: flex;
}
.list-item:first-child {
margin-left: 0;
}
.list-item {
display: flex;
align-items: center;
flex-direction: column;
margin-left: 36rpx;
}
.cover {
width: 110rpx;
height: 110rpx;
@ -210,11 +211,11 @@ export default {
font-weight: bold;
color: #ec7655;
}
}
.more-worker {
display: flex;
align-items: center;
.text {
.more-worker {
display: flex;
align-items: center;
}
.worker-num {
font-size: 26rpx;
font-weight: bold;
color: #666666;
@ -224,9 +225,8 @@ export default {
color: #a7a7a7;
}
}
}
.worker-item-box {
width: 100%;
padding: 20rpx 0 10rpx 0;
.order-footer {
width: 100%;
}
}
</style>

6
src/components/service/insurance.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="insurance" :style="{ padding: padding }">
<view class="component-service-insurance" :style="{ padding: padding }">
<view class="title-box">
<view class="title" @click="insuranceModal">
<text class="text">意外保</text>
@ -19,7 +19,7 @@
<script>
import WidgetSwitch from "@/components/widgets/switch";
export default {
name: "service-insurance",
name: "component-service-insurance",
data() {
return {
state: false,
@ -60,7 +60,7 @@ export default {
</script>
<style lang="less" scoped>
.insurance {
.component-service-insurance {
width: 100%;
display: flex;
align-items: center;

74
src/components/service/preview-item.vue
View File

@ -1,21 +1,19 @@
<template>
<view>
<view class="preview-item">
<image class="cover-image" mode="aspectFill" :src="data.icon" @click="clickItem(data.id)"></image>
<view class="item-box" @click="clickItem(data.id)">
<view class="title limit-line clamp-1">{{ data.name }}</view>
<view class="text-box">
{{ "已服务113256次" }}
</view>
<view class="price">¥158元起</view>
<view class="component-service-preview-item">
<image class="cover-image" mode="aspectFill" :src="data.icon" @click="clickItem(data.id)"></image>
<view class="item-box" @click="clickItem(data.id)">
<view class="title limit-line clamp-1">{{ data.name }}</view>
<view class="text-box">
{{ "已服务113256次" }}
</view>
<view class="price">¥158元起</view>
</view>
</view>
</template>
<script>
export default {
name: "service-preview-item",
name: "component-service-preview-item",
data() {
return {};
},
@ -38,38 +36,38 @@ export default {
</script>
<style lang="less" scoped>
.preview-item {
.component-service-preview-item {
width: 100%;
display: flex;
justify-content: flex-start;
}
.cover-image {
width: 130rpx;
height: 130rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #d8d8d8;
flex-shrink: 0;
}
.item-box {
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 50rpx;
.title {
font-size: 26rpx;
font-weight: bold;
color: #010101;
.cover-image {
width: 130rpx;
height: 130rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #d8d8d8;
flex-shrink: 0;
}
.text-box {
display: inline-block;
font-size: 22rpx;
color: #333333;
}
.price {
font-size: 30rpx;
color: #ec7655;
.item-box {
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 50rpx;
.title {
font-size: 26rpx;
font-weight: bold;
color: #010101;
}
.text-box {
display: inline-block;
font-size: 22rpx;
color: #333333;
}
.price {
font-size: 30rpx;
color: #ec7655;
}
}
}
</style>

8
src/components/widgets/checkbox.vue
View File

@ -1,12 +1,12 @@
<template>
<view class="checkbox" :class="{ active: checked }" :style="{ fontSize: utils.rpx2px(size) + 'px' }">
<view class="component-widget-checkbox" :class="{ active: checked }" :style="{ fontSize: utils.rpx2px(size) + 'px' }">
<text class="iconfont" :class="[checked ? 'icon-xuanzeyixuanze' : 'icon-xuanzeweixuanze']"></text>
</view>
</template>
<script>
export default {
name: "widget-checkbox",
name: "component-widget-checkbox",
data() {
return {
utils: this.$utils,
@ -31,12 +31,12 @@ export default {
</script>
<style lang="less" scoped>
.checkbox {
.component-widget-checkbox {
.iconfont {
color: #c7c7c7;
}
}
.checkbox.active {
.component-widget-checkbox.active {
.iconfont {
color: #8194f2;
}

20
src/components/widgets/count-modify.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="count-modify" :class="[number > 0 ? 'between' : 'end']">
<view class="component-widget-count-modify" :class="[number > 0 ? 'between' : 'end']">
<view v-if="number > 0" class="btn sub" @click="sub">
<text class="iconfont icon-jianhao"></text>
</view>
@ -12,7 +12,7 @@
<script>
export default {
name: "widget-count-modify",
name: "component-widget-count-modify",
data() {
return {
number: 0,
@ -48,7 +48,7 @@ export default {
</script>
<style lang="less" scoped>
.count-modify {
.component-widget-count-modify {
width: 130rpx;
height: 35rpx;
display: flex;
@ -57,16 +57,16 @@ export default {
color: #2d2d2d;
font-size: 30rpx;
}
.btn.sub .iconfont,
.btn.add .iconfont {
color: #4b65ed;
font-size: 35rpx;
}
}
.count-modify.between {
.component-widget-count-modify.between {
justify-content: space-between;
}
.count-modify.end {
.component-widget-count-modify.end {
justify-content: flex-end;
}
.btn.sub .iconfont,
.btn.add .iconfont {
color: #4b65ed;
font-size: 35rpx;
}
</style>

6
src/components/widgets/loadmore.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="loadmore">
<view class="component-widgets-loadmore">
<view class="text" v-if="!hasMore" @click="loadmore">
<text>我已经到底了~</text>
</view>
@ -8,7 +8,7 @@
<script>
export default {
name: "widgets-loadmore",
name: "component-widgets-loadmore",
data() {
return {
page: 1,
@ -39,7 +39,7 @@ export default {
</script>
<style lang="less" scoped>
.loadmore {
.component-widgets-loadmore {
width: 100%;
text-align: center;
.text {

6
src/components/widgets/modal.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="modal-container" v-if="show">
<view class="component-widgets-modal" v-if="show">
<view class="modal-mask" @click="close"></view>
<view class="modal-content" :style="{ width: width }">
<view class="modal-title">
@ -17,7 +17,7 @@
<script>
export default {
name: "widgets-modal",
name: "component-widgets-modal",
data() {
return {};
},
@ -48,7 +48,7 @@ export default {
</script>
<style lang="less" scoped>
.modal-container {
.component-widgets-modal {
z-index: 25;
position: fixed;
top: 0;

6
src/components/widgets/search.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="input-box">
<view class="component-widgets-search">
<view class="icon">
<text class="iconfont icon-sousuo"></text>
</view>
@ -15,7 +15,7 @@
<script>
export default {
name: "widgets-search",
name: "component-widgets-search",
data() {
return {
keywords: "",
@ -30,7 +30,7 @@ export default {
</script>
<style lang="less" scoped>
.input-box {
.component-widgets-search {
width: 670rpx;
height: auto;
background-color: #fff;

8
src/components/widgets/switch.vue
View File

@ -1,12 +1,12 @@
<template>
<view class="switch" :class="{ active: open }" :style="{ fontSize: utils.rpx2px(size) + 'px' }">
<view class="component-widget-switch" :class="{ active: open }" :style="{ fontSize: utils.rpx2px(size) + 'px' }">
<text class="iconfont" :class="[open ? 'icon-kaiguan-kai' : 'icon-kaiguan-guan']"></text>
</view>
</template>
<script>
export default {
name: "widget-switch",
name: "component-widget-switch",
data() {
return {
utils: this.$utils,
@ -31,11 +31,11 @@ export default {
</script>
<style lang="less" scoped>
.switch {
.component-widget-switch {
font-size: 35rpx;
color: #c7c7c7;
}
.switch.active {
.component-widget-switch.active {
color: #8194f2;
}
</style>

6
src/components/widgets/tips.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="tips" :style="{ background: backgroundColor }">
<view class="component-widgets-tips" :style="{ background: backgroundColor }">
<text class="iconfont icon-tixing" :class="[icon]" :style="{ color: iconColor }"></text>
<text class="text-container" :style="{ color: textColor }">
{{ text }}
@ -9,7 +9,7 @@
<script>
export default {
name: "widgets-tips",
name: "component-widgets-tips",
data() {
return {};
},
@ -44,7 +44,7 @@ export default {
</script>
<style lang="less" scoped>
.tips {
.component-widgets-tips {
width: 100%;
// height: 75rpx;
display: flex;

6
src/components/worker/item.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="worker-item">
<view class="component-worker-item">
<view class="head">
<image class="cover" :src="data.cover" mode="aspectFill" />
<text v-if="showPrice" class="price">¥ {{ data.price }}</text>
@ -22,7 +22,7 @@
<script>
export default {
name: "worker-item",
name: "component-worker-item",
data() {
return {
models: this.$models,
@ -47,7 +47,7 @@ export default {
</script>
<style lang="less" scoped>
.worker-item {
.component-worker-item {
width: 100%;
display: flex;
align-items: center;