整体修改组件样式名称
This commit is contained in:
parent
03c8c38bf2
commit
c698a76016
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="swiper-container">
|
||||
<view class="component-banner">
|
||||
<swiper
|
||||
class="swiper"
|
||||
circular
|
||||
|
@ -71,10 +71,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.swiper-container {
|
||||
.component-banner {
|
||||
position: relative;
|
||||
}
|
||||
.swiper-container,
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper,
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
|
@ -102,4 +102,5 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -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,25 +251,20 @@ 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 {
|
||||
.menu-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.component-tab-view {
|
||||
.tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.component-tab-item {
|
||||
.tab-item {
|
||||
height: 100rpx;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20rpx;
|
||||
|
@ -280,12 +275,12 @@ export default {
|
|||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
.component-tab-item-active {
|
||||
.tab-item-active {
|
||||
position: relative;
|
||||
color: #4b65ed;
|
||||
background: #ffffff;
|
||||
}
|
||||
.component-tab-item-active::before {
|
||||
.tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid #4b65ed;
|
||||
|
@ -293,12 +288,9 @@ export default {
|
|||
left: 0;
|
||||
top: 38rpx;
|
||||
}
|
||||
.component-tab-view {
|
||||
height: 100%;
|
||||
}
|
||||
.right-box {
|
||||
width: 550rpx;
|
||||
}
|
||||
.page-view.cate {
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
@ -309,4 +301,6 @@ export default {
|
|||
background-color: #ffffff;
|
||||
padding: 36rpx 32rpx 0 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="component-cate-template-cate">
|
||||
<view class="item-title">
|
||||
<text>{{ data.name }}</text>
|
||||
</view>
|
||||
|
@ -37,6 +37,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.component-cate-template-cate {
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
|
@ -72,4 +73,5 @@ export default {
|
|||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="component-cate-template-list">
|
||||
<view class="item-title">
|
||||
<text>{{ data.name }}</text>
|
||||
</view>
|
||||
|
@ -42,6 +42,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.component-cate-template-list {
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
|
@ -66,4 +67,5 @@ export default {
|
|||
.thumb-box:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -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;
|
||||
|
|
|
@ -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-desc-row {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
|
@ -170,15 +170,15 @@ 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 {
|
||||
.worker-item-box {
|
||||
width: 100%;
|
||||
padding: 20rpx 0 10rpx 0;
|
||||
}
|
||||
.worker-list-group {
|
||||
width: 100%;
|
||||
|
@ -197,6 +197,7 @@ export default {
|
|||
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 {
|
||||
}
|
||||
.worker-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
|
@ -224,9 +225,8 @@ export default {
|
|||
color: #a7a7a7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.worker-item-box {
|
||||
.order-footer {
|
||||
width: 100%;
|
||||
padding: 20rpx 0 10rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -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;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="preview-item">
|
||||
<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>
|
||||
|
@ -10,12 +9,11 @@
|
|||
<view class="price">¥158元起</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "service-preview-item",
|
||||
name: "component-service-preview-item",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
@ -38,11 +36,10 @@ 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;
|
||||
|
@ -72,4 +69,5 @@ export default {
|
|||
color: #ec7655;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
.count-modify.between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.count-modify.end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.btn.sub .iconfont,
|
||||
.btn.add .iconfont {
|
||||
color: #4b65ed;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
.component-widget-count-modify.between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.component-widget-count-modify.end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue