整体修改组件样式名称

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<template> <template>
<view class="swiper-container"> <view class="component-banner">
<swiper <swiper
class="swiper" class="swiper"
circular circular
@ -71,16 +71,16 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.swiper-container { .component-banner {
position: relative; position: relative;
}
.swiper-container,
.swiper,
.swiper-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
} .swiper,
.swiper-dots { .swiper-item {
width: 100%;
height: 100%;
}
.swiper-dots {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -97,9 +97,10 @@ export default {
.swiper-dot-item.active { .swiper-dot-item.active {
background: #f9b05f; background: #f9b05f;
} }
} }
.banner-image { .banner-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
</style> </style>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
<template> <template>
<view> <view class="component-service-preview-item">
<view class="preview-item">
<image class="cover-image" mode="aspectFill" :src="data.icon" @click="clickItem(data.id)"></image> <image class="cover-image" mode="aspectFill" :src="data.icon" @click="clickItem(data.id)"></image>
<view class="item-box" @click="clickItem(data.id)"> <view class="item-box" @click="clickItem(data.id)">
<view class="title limit-line clamp-1">{{ data.name }}</view> <view class="title limit-line clamp-1">{{ data.name }}</view>
@ -10,12 +9,11 @@
<view class="price">¥158元起</view> <view class="price">¥158元起</view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script> <script>
export default { export default {
name: "service-preview-item", name: "component-service-preview-item",
data() { data() {
return {}; return {};
}, },
@ -38,20 +36,19 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.preview-item { .component-service-preview-item {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} .cover-image {
.cover-image {
width: 130rpx; width: 130rpx;
height: 130rpx; height: 130rpx;
box-sizing: border-box; box-sizing: border-box;
border-radius: 20rpx; border-radius: 20rpx;
border: 2rpx solid #d8d8d8; border: 2rpx solid #d8d8d8;
flex-shrink: 0; flex-shrink: 0;
} }
.item-box { .item-box {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -71,5 +68,6 @@ export default {
font-size: 30rpx; font-size: 30rpx;
color: #ec7655; color: #ec7655;
} }
}
} }
</style> </style>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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