zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 替换sass版本，定义全局样式，实现简单的页面布局操作，比如颜色、边距、圆角等

Browse Source
This commit is contained in:
duanshuwen 2025-10-06 13:13:16 +08:00
parent e0f0e90635
commit c8e51e4975
108 changed files with 366 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -72,7 +72,7 @@
"@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001",
"@vue/runtime-core": "^3.4.21",
"@vue/tsconfig": "^0.1.3",
"sass": "^1.93.0",
"sass": "1.58.3",
"vite": "5.2.8"
}
}

2
src/components/AddCarCrad/index.vue
View File

@ -25,5 +25,5 @@ const props = defineProps({
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/Calender/index.vue
View File

@ -474,5 +474,5 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
// 引入样式文件
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/CheckBox/index.vue
View File

@ -40,5 +40,5 @@ const onChange = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/CommandWrapper/index.vue
View File

@ -14,5 +14,5 @@ defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/CommandWrapper/styles/index.scss
View File

@ -7,5 +7,5 @@
.command-text {
color: #fff;
font-size: 14px;
font-size: $uni-font-size-base;
}

2
src/components/CreateServiceOrder/index.vue
View File

@ -252,5 +252,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

32
src/components/CreateServiceOrder/styles/index.scss
View File

@ -3,10 +3,10 @@
}
.order-header {
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 500;
margin-bottom: 10px;
color: #333;
color: $uni-text-color;
}
.order-content {
@ -36,9 +36,9 @@
}
.order-description {
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 500;
color: #333;
color: $uni-text-color;
}
.order-line {
@ -75,8 +75,8 @@
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.detail-label {
@ -85,15 +85,15 @@
}
.detail-value {
color: #333;
color: $uni-text-color;
}
.detail-input {
border: none;
outline: none;
width: calc(100% - 80px);
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
border-bottom: 1px solid #ddd;
}
@ -101,8 +101,8 @@
border: none;
outline: none;
width: 100%;
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.order-button {
@ -110,7 +110,7 @@
height: 42px;
background: linear-gradient(90deg, #ff7e00, #ffba00);
color: #fff;
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 600;
border-radius: 20px;
margin-top: 20px;
@ -131,9 +131,9 @@
.order-button-secondary {
flex: 1;
height: 42px;
background: linear-gradient(90deg, #0256FF, #00A6FF);
background: linear-gradient(90deg, #0256ff, #00a6ff);
color: #fff;
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 600;
border: none;
border-radius: 20px;
@ -148,7 +148,7 @@
height: 42px;
background: linear-gradient(90deg, #ff7e00, #ffba00);
color: #fff;
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 600;
border-radius: 20px;
display: flex;
@ -160,7 +160,7 @@
margin-bottom: 12px;
display: flex;
align-items: center;
font-size: 14px;
font-size: $uni-font-size-base;
color: #ed6a0c;
}

2
src/components/Divider/index.vue
View File

@ -3,5 +3,5 @@
</template>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/Feedback/index.vue
View File

@ -141,5 +141,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

24
src/components/Feedback/styles/index.scss
View File

@ -3,10 +3,10 @@
}
.order-header {
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 500;
margin-bottom: 10px;
color: #333;
color: $uni-text-color;
}
.order-content {
@ -22,8 +22,8 @@
display: flex;
align-items: start;
margin-bottom: 12px;
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.detail-label {
@ -32,14 +32,14 @@
}
.detail-value {
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.detail-textarea {
width: 100%;
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
border-radius: 4px;
border: 1px solid #ddd;
padding: 8px;
@ -49,8 +49,8 @@
border: none;
outline: none;
width: 100%;
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
border-bottom: 1px solid #ddd;
padding-left: 8px;
}
@ -59,7 +59,7 @@
width: 300px;
height: 42px;
color: #fff;
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 600;
border-radius: 21px;
margin-top: 24px;
@ -80,7 +80,7 @@
margin-bottom: 12px;
display: flex;
align-items: center;
font-size: 14px;
font-size: $uni-font-size-base;
color: #ed6a0c;
}

2
src/components/FormCard/index.vue
View File

@ -175,5 +175,5 @@ defineExpose({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

8
src/components/FormCard/styles/index.scss
View File

@ -1,7 +1,7 @@
// SASS 变量定义
$form-primary-color: #00a6ff;
$form-error-color: #ff4d4f;
$form-text-color: #333;
$form-text-color: $uni-text-color;
$form-label-color: #86909c;
$form-border-color: #ddd;
$form-input-border-color: #ddd;
@ -85,7 +85,7 @@ $form-transition: all 0.2s ease;
}
.form-label {
font-size: 14px;
font-size: $uni-font-size-base;
color: $form-label-color;
width: 50px;
flex-shrink: 0;
@ -95,7 +95,7 @@ $form-transition: all 0.2s ease;
.form-input {
flex: 1;
font-size: 14px;
font-size: $uni-font-size-base;
color: $form-text-color;
border: none;
border-bottom: 1px solid $form-input-border-color;
@ -127,7 +127,7 @@ $form-transition: all 0.2s ease;
}
.form-error {
font-size: 12px;
font-size: $uni-font-size-sm;
color: $form-error-color;
margin-top: 6px;
margin-left: 60px;

2
src/components/GoodDetail/index.vue
View File

@ -58,5 +58,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use './styles/index.scss';
@import "./styles/index.scss";
</style>

6
src/components/GoodDetail/styles/index.scss
View File

@ -23,8 +23,8 @@
flex-shrink: 0;
.module-title {
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
text-align: center;
word-wrap: break-word;
margin-left: 4px;
@ -33,7 +33,7 @@
.module-desc {
flex: 1;
font-size: 12px;
font-size: $uni-font-size-sm;
color: #666;
line-height: 1.5;
margin-top: 4px;

8
src/components/ImageSwiper/index.vue
View File

@ -47,7 +47,11 @@
:id="`thumbnail-${index}`"
@click="handleThumbnailClick(index)"
>
<image class="thumbnail-image" :src="thumb.photoUrl" mode="aspectFill"></image>
<image
class="thumbnail-image"
:src="thumb.photoUrl"
mode="aspectFill"
></image>
<text>{{ thumb.photoName }}</text>
</view>
</view>
@ -159,5 +163,5 @@ const handleSwiperChange = (e) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/LocationCard/index.vue
View File

@ -48,5 +48,5 @@ const openMap = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

10
src/components/LocationCard/styles/index.scss
View File

@ -7,8 +7,8 @@
background-size: cover;
background-position: center;
border-radius: 20px;
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
position: relative;
overflow: hidden;
@ -30,15 +30,15 @@
}
.location-label {
color: #333;
font-size: 14px;
color: $uni-text-color;
font-size: $uni-font-size-base;
font-weight: 500;
}
.address-text {
margin-top: 4px;
color: #666;
font-size: 12px;
font-size: $uni-font-size-sm;
font-weight: 400;
}

2
src/components/LocationInfo/index.vue
View File

@ -42,5 +42,5 @@ const openMap = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/components/LocationInfo/styles/index.scss
View File

@ -1,8 +1,8 @@
.store-address {
display: flex;
align-items: center;
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
text {
flex: 1;

8
src/components/ModuleTitle/index.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="module-header mb12">
<text class="module-title">{{ title }}</text>
<image class="underline" src="./images/wave_icon.png" mode="aspectFill"/>
<image class="underline" src="./images/wave_icon.png" mode="aspectFill" />
</view>
</template>
@ -9,11 +9,11 @@
defineProps({
title: {
type: String,
default: '图片详情'
}
default: "图片详情",
},
});
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/OrderCardItem/index.vue
View File

@ -48,5 +48,5 @@ const orderStatusText = computed(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

10
src/components/OrderCardItem/styles/index.scss
View File

@ -25,11 +25,11 @@
.order-title {
font-size: 16px;
color: #333;
color: $uni-text-color;
}
.order-status {
font-size: 14px;
font-size: $uni-font-size-base;
padding: 5px 10px;
border-radius: 15px;
}
@ -70,12 +70,12 @@
}
.detail-label {
font-size: 14px;
font-size: $uni-font-size-base;
color: #666;
margin-right: 10px;
}
.detail-value {
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}

52
src/components/Privacy/index.vue
View File

@ -3,14 +3,23 @@
<view class="content">
<view class="title">隐私保护指引</view>
<view class="des">
请您仔细阅读并充分理解<text class="link" @click="handleOpenPrivacyContract">{{ privacyContractName }}</text>
，如您同意前述协议的全部内容，请点击“同意”开始使用。<text class="cancel">如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text>
请您仔细阅读并充分理解<text
class="link"
@click="handleOpenPrivacyContract"
>{{ privacyContractName }}</text
>
，如您同意前述协议的全部内容，请点击“同意”开始使用。<text class="cancel"
>如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text
>
</view>
<view class="btns">
<button class="reject" @click="handleDisagree">拒绝</button>
<button class="agree" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">
<button
class="agree"
open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization"
>
同意
</button>
</view>
@ -19,11 +28,11 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
const showPrivacy = ref(true)
const privacyContractName = ref('隐私保护指引')
const showPrivacy = ref(true);
const privacyContractName = ref("隐私保护指引");
onShow(() => {
// 条件编译微信小程序
@ -34,7 +43,7 @@ onShow(() => {
console.log("cj隐私配置", res);
if (res.errMsg == "getPrivacySetting:ok" && res.needAuthorization) {
privacyContractName.value = res.privacyContractName;
showPrivacy.value = res.needAuthorization
showPrivacy.value = res.needAuthorization;
}
},
});
@ -44,36 +53,33 @@ onShow(() => {
// #ifdef MP-TOUTIAO
uni.getPrivacySetting({
success: (res) => {
console.log(res)
}
})
console.log(res);
},
});
// #endif
})
});
// 拒绝
const handleDisagree = () => {
showPrivacy.value = false
}
showPrivacy.value = false;
};
// 同意
const handleAgreePrivacyAuthorization = () => {
showPrivacy.value = false
}
showPrivacy.value = false;
};
// 打开隐私保护指引
const handleOpenPrivacyContract = () => {
// 条件编译微信小程序
// #ifdef MP-WEIXIN
wx.openPrivacyContract({
fail: () => { }
})
fail: () => {},
});
// #endif
}
};
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/ResponseIntro/index.vue
View File

@ -17,5 +17,5 @@ defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/components/ResponseIntro/styles/index.scss
View File

@ -4,8 +4,8 @@
.response-intro-text {
font-weight: 500;
font-size: 14px;
color: #333333;
font-size: $uni-font-size-base;
color: $uni-text-color;
line-height: 20px;
text-align: justify;
}

2
src/components/ResponseWrapper/index.vue
View File

@ -7,5 +7,5 @@
<script setup></script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/ServiceTipsWord/index.vue
View File

@ -36,5 +36,5 @@ const handleClick = (type) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/components/ServiceTipsWord/styles/index.scss
View File

@ -9,7 +9,7 @@
}
.header-text {
font-size: 12px;
font-size: $uni-font-size-sm;
color: #6b84a2;
}
@ -46,7 +46,7 @@
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 1)
);
font-size: 12px;
font-size: $uni-font-size-sm;
font-weight: 500;
color: #00a6ff;
border-radius: 50px;

2
src/components/Stepper/index.vue
View File

@ -59,5 +59,5 @@ const increase = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/components/Stepper/styles/index.scss
View File

@ -6,6 +6,6 @@
.stepper-text {
width: 40px;
font-size: 16px;
color: #333;
color: $uni-text-color;
text-align: center;
}

2
src/components/SumCard/index.vue
View File

@ -25,5 +25,5 @@ defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

6
src/components/SumCard/styles/index.scss
View File

@ -19,15 +19,15 @@
.sum-label {
font-size: 15px;
color: #333;
color: $uni-text-color;
}
.sum-value {
font-size: 14px;
font-size: $uni-font-size-base;
color: #999;
}
.sum-discount {
font-size: 14px;
font-size: $uni-font-size-base;
color: #ff5722;
}

2
src/components/TagsGroup/index.vue
View File

@ -11,5 +11,5 @@ const tags = ["门票套餐", "民俗活动", "车程路况"];
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

6
src/components/TagsGroup/styles/index.scss
View File

@ -7,7 +7,7 @@
background-color: #fff;
border-radius: 10px;
padding: 8px 16px;
font-size: 12px;
color: #00A6FF;
font-size: $uni-font-size-sm;
color: #00a6ff;
white-space: nowrap;
}
}

2
src/components/TopNavBar/index.vue
View File

@ -140,5 +140,5 @@ const handleBack = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/components/TopNavBar/styles/index.scss
View File

@ -1,7 +1,7 @@
// TopNavBar 组件样式
.top-nav-bar {
width: 100%;
background-color: #ffffff;
background-color: $uni-bg-color;
&.has-shadow {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
@ -75,7 +75,7 @@
.nav-bar-title {
font-size: 18px;
font-weight: 500;
color: #333333;
color: $uni-text-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2
src/pages-order/order/components/CustomEmpty/index.vue
View File

@ -22,5 +22,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages-order/order/components/CustomEmpty/styles/index.scss
View File

@ -14,6 +14,6 @@
.empty-text {
margin-top: 10px;
font-size: 14px;
font-size: $uni-font-size-base;
color: #666666;
}
}

2
src/pages-order/order/components/GoodsInfo/index.vue
View File

@ -123,5 +123,5 @@ const formatServiceAmount = (amount) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages-order/order/components/NoticeInfo/index.vue
View File

@ -26,5 +26,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages-order/order/components/NoticeInfo/styles/index.scss
View File

@ -9,5 +9,5 @@
align-items: center;
font-size: 16px;
font-weight: 500;
color: #333;
color: $uni-text-color;
}

6
src/pages-order/order/components/OrderCard/InfoRow.vue
View File

@ -31,15 +31,15 @@ const props = defineProps({
}
.label {
font-size: 12px;
font-size: $uni-font-size-sm;
color: #666666;
flex-shrink: 0;
margin-right: 8px;
}
.value {
font-size: 14px;
color: #333333;
font-size: $uni-font-size-base;
color: $uni-text-color;
flex: 1;
}
</style>

2
src/pages-order/order/components/OrderCard/index.vue
View File

@ -117,5 +117,5 @@ const handleCardClick = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

6
src/pages-order/order/components/OrderCard/styles/index.scss
View File

@ -41,9 +41,9 @@
}
.order-title {
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 500;
color: #333333;
color: $uni-text-color;
line-height: 1.4;
}
@ -56,7 +56,7 @@
box-sizing: border-box;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-size: $uni-font-size-sm;
font-weight: 500;
&.tag-0 {

2
src/pages-order/order/components/OrderInfo/index.vue
View File

@ -160,5 +160,5 @@ const openFeedback = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

5
src/pages-order/order/components/OrderInfo/styles/index.scss
View File

@ -1,14 +1,9 @@
@use "sass:color";
// SASS变量定义，提高可维护性和编译性能
// 颜色系统
$order-bg-color: #fff;
$text-color-primary: #333;
$text-color-secondary: #666;
$text-color-accent: #ff5722;
$button-color: #00a6ff;
$button-hover-color: color.scale($button-color, $lightness: -16%);
$button-disabled-color: #ccc;
$border-color: #ececec;
$shadow-color: rgba(0, 0, 0, 0.08);

2
src/pages-order/order/components/OrderQrcode/index.vue
View File

@ -31,5 +31,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages-order/order/components/OrderQrcode/styles/index.scss
View File

@ -1,5 +1,5 @@
.order-qrcode {
background: #ffffff;
background-color: $uni-bg-color;
border-radius: 10px;
box-sizing: border-box;
display: flex;
@ -10,7 +10,7 @@
margin-bottom: 12px;
text {
font-size: 12px;
font-size: $uni-font-size-sm;
color: #666666;
line-height: 17px;
margin-top: 4px;

2
src/pages-order/order/components/OrderStatusInfo/index.vue
View File

@ -85,5 +85,5 @@ const statusDescription = computed(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages-order/order/components/OrderStatusInfo/styles/index.scss
View File

@ -24,5 +24,5 @@
}
.status-description {
font-size: 12px;
}
font-size: $uni-font-size-sm;
}

2
src/pages-order/order/components/RefundPopup/index.vue
View File

@ -150,5 +150,5 @@ const handleConfirmClick = (text) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

16
src/pages-order/order/components/RefundPopup/styles/index.scss
View File

@ -27,7 +27,7 @@
&__title {
font-size: 16px;
font-weight: 500;
color: #333;
color: $uni-text-color;
line-height: 22px;
margin-bottom: 12px;
text-align: center;
@ -40,7 +40,7 @@
margin-bottom: 4px;
.amount-symbol {
font-size: 12px;
font-size: $uni-font-size-sm;
color: #ff6a00;
}
@ -51,14 +51,14 @@
}
.amount-unit {
font-size: 12px;
font-size: $uni-font-size-sm;
color: #ff6a00;
}
}
&__amount-label {
font-size: 12px;
color: #333;
font-size: $uni-font-size-sm;
color: $uni-text-color;
margin-bottom: 16px;
}
@ -67,15 +67,15 @@
margin-bottom: 16px;
.policy-title {
font-size: 14px;
font-size: $uni-font-size-base;
color: #007aff;
font-weight: 600;
margin-bottom: 8px;
}
.policy-content {
font-size: 12px;
color: #333333;
font-size: $uni-font-size-sm;
color: $uni-text-color;
line-height: 22px;
text-align: justify;
}

2
src/pages-order/order/components/Tabs/index.vue
View File

@ -271,5 +271,5 @@ defineExpose({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

16
src/pages-order/order/components/Tabs/styles/index.scss
View File

@ -21,7 +21,7 @@
}
.tab-text {
font-size: 14px;
font-size: $uni-font-size-base;
color: #666;
font-weight: 400;
transition: all 0.3s ease;
@ -29,14 +29,14 @@
}
.tab-text-active {
color: #333;
color: $uni-text-color;
font-size: 16px;
font-weight: 600;
}
.tab-item-active {
.tab-text {
color: #333;
color: $uni-text-color;
font-weight: 600;
}
}
@ -46,13 +46,14 @@
bottom: 0;
height: 3px;
min-height: 3px; /* 确保最小高度 */
background-color: #007AFF;
background-color: #007aff;
border-radius: 10px;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
transform: translateZ(0); /* 启用硬件加速 */
will-change: left, width; /* 优化动画性能 */
/* 初始状态：未初始化时隐藏 */
opacity: 0;
width: 15px; /* 默认宽度15px */
@ -64,7 +65,6 @@
opacity: 1;
}
/* 点击效果 */
.tab-item:active {
opacity: 0.7;
@ -97,4 +97,4 @@
.tab-indicator.animating {
animation: tabSwitch 0.3s ease-out;
}
}

2
src/pages-order/order/components/UserInfo/index.vue
View File

@ -92,5 +92,5 @@ const formatPhone = (phone) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

8
src/pages-order/order/components/UserInfo/styles/index.scss
View File

@ -17,12 +17,12 @@
}
.label {
font-size: 14px;
font-size: $uni-font-size-base;
color: #666;
margin-right: 8px;
}
.value {
font-size: 14px;
color: #333;
}
font-size: $uni-font-size-base;
color: $uni-text-color;
}

2
src/pages-order/order/detail.vue
View File

@ -108,5 +108,5 @@ const handleRefundConfirm = async ({ orderId }) => {
</script>
<style lang="scss" scoped>
@use "./styles/detail.scss";
@import "./styles/detail.scss";
</style>

2
src/pages/goods/components/DateSelector/index.vue
View File

@ -63,5 +63,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

8
src/pages/goods/components/DateSelector/styles/index.scss
View File

@ -17,14 +17,14 @@
left: 24rpx;
font-size: 20rpx;
color: #999999;
background: #ffffff;
background-color: $uni-bg-color;
padding: 0 8rpx;
z-index: 1;
}
.date-box {
padding: 20rpx 24rpx;
background: #ffffff;
background-color: $uni-bg-color;
border-radius: 16rpx;
border: 2rpx solid #f0f0f0;
display: flex;
@ -41,7 +41,7 @@
.date-text {
font-size: 32rpx;
font-weight: 500;
color: #333333;
color: $uni-text-color;
}
.day-text {
@ -61,4 +61,4 @@
.nights-text {
font-size: 24rpx;
color: #666666;
}
}

2
src/pages/goods/components/GoodConfirm/index.vue
View File

@ -369,5 +369,5 @@ defineExpose({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

22
src/pages/goods/components/GoodConfirm/styles/index.scss
View File

@ -15,7 +15,7 @@
.header-title {
font-size: 18px;
font-weight: 600;
color: #333;
color: $uni-text-color;
flex: 1;
text-align: center;
}
@ -64,7 +64,7 @@
.goods-title {
font-size: 16px;
font-weight: 500;
color: #333;
color: $uni-text-color;
line-height: 22px;
margin-bottom: 8px;
display: -webkit-box;
@ -79,7 +79,7 @@
margin-bottom: 12px;
.currency {
font-size: 14px;
font-size: $uni-font-size-base;
color: #ff6b35;
font-weight: 500;
}
@ -92,7 +92,7 @@
}
.price-desc {
font-size: 14px;
font-size: $uni-font-size-base;
color: #999;
font-weight: 400;
margin-left: 12px;
@ -107,9 +107,9 @@
}
.service-title {
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 500;
color: #333;
color: $uni-text-color;
}
.goods-service-item {
@ -120,12 +120,12 @@
.service-label,
.service-value {
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 500;
}
.service-label {
color: #333;
color: $uni-text-color;
}
.service-value {
@ -166,8 +166,8 @@
}
.total-count {
font-size: 12px;
color: #333;
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
.total-price {
@ -178,7 +178,7 @@
&::before {
content: "¥";
font-size: 12px;
font-size: $uni-font-size-sm;
}
}

3
src/pages/goods/components/GoodInfo/index.vue
View File

@ -47,9 +47,8 @@ const facilitiesList = computed(() => {
return [];
});
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

6
src/pages/goods/components/GoodInfo/styles/index.scss
View File

@ -9,7 +9,7 @@
.title {
font-size: 16px;
color: #333;
color: $uni-text-color;
font-weight: 600;
line-height: 1.4;
flex: 0 280px;
@ -54,8 +54,8 @@
border-radius: 6px;
.facility-text {
font-size: 12px;
color: #333;
font-size: $uni-font-size-sm;
color: $uni-text-color;
line-height: 1;
white-space: nowrap;
overflow: hidden;

2
src/pages/goods/index.vue
View File

@ -349,5 +349,5 @@ const handleDateSelect = (data) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

56
src/pages/goods/styles/index.scss
View File

@ -1,7 +1,4 @@
@use "sass:color";
$button-color: #00a6ff;
$button-hover-color: color.scale($button-color, $lightness: -16%);
.goods-container {
display: flex;
@ -37,8 +34,8 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
flex-shrink: 0;
.module-title {
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
text-align: center;
word-wrap: break-word;
margin-left: 4px;
@ -47,7 +44,7 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
.module-desc {
flex: 1;
font-size: 12px;
font-size: $uni-font-size-sm;
color: #666;
line-height: 1.5;
margin-top: 4px;
@ -94,8 +91,8 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
}
.label {
font-size: 14px;
color: #333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.price {
@ -106,7 +103,7 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
&::before {
content: "¥";
font-size: 12px;
font-size: $uni-font-size-sm;
}
}
@ -121,51 +118,12 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
justify-content: center;
border-radius: 50px;
height: 42px;
font-size: 14px;
font-size: $uni-font-size-base;
font-weight: 500;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
letter-spacing: 0.5px;
margin-left: auto;
// 按钮波纹效果
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
&:hover {
background: linear-gradient(
135deg,
$button-hover-color 0%,
color.scale($button-hover-color, $lightness: -11.9%) 100%
);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba($button-color, 0.4);
&::before {
width: 300px;
height: 300px;
}
}
&:active {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba($button-color, 0.3);
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px rgba($button-color, 0.3);
}
}
}

2
src/pages/index/components/chat/ChatCardAi/index.vue
View File

@ -66,5 +66,5 @@ watch(
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/chat/ChatCardMine/index.vue
View File

@ -16,5 +16,5 @@ defineProps({
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/chat/ChatCardOther/index.vue
View File

@ -16,5 +16,5 @@ defineProps({
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages/index/components/chat/ChatCardOther/styles/index.scss
View File

@ -8,7 +8,7 @@
overflow-x: hidden; // ✅ 防止横向撑开
text {
font-size: 14px;
color: #333333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
}

2
src/pages/index/components/chat/ChatInputArea/index.vue
View File

@ -244,5 +244,5 @@ defineExpose({ focusInput });
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

6
src/pages/index/components/chat/ChatInputArea/styles/index.scss
View File

@ -2,7 +2,7 @@
display: flex;
align-items: center;
border-radius: 22px;
background-color: #ffffff;
background-color: $uni-bg-color;
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
margin: 0 12px;
margin-bottom: 8px;
@ -29,12 +29,12 @@
.hold-to-talk-button {
width: 100%;
height: 44px;
color: #333333;
color: $uni-text-color;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
background-color: $uni-bg-color;
transition: all 0.2s ease;
user-select: none;
-webkit-user-select: none;

2
src/pages/index/components/chat/ChatMainList/index.vue
View File

@ -802,5 +802,5 @@ const resetConfig = () => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/chat/ChatMoreTips/index.vue
View File

@ -39,5 +39,5 @@ const sendReply = (text) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages/index/components/chat/ChatMoreTips/styles/index.scss
View File

@ -15,7 +15,7 @@
border-radius: 8px;
margin: 4px;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
background-color: $uni-bg-color;
padding: 2px 12px;
display: flex;
flex-direction: column;
@ -25,7 +25,7 @@
.more-tips-item-title {
font-weight: 500;
font-size: 12px;
font-size: $uni-font-size-sm;
color: #00a6ff;
line-height: 24px;
text-align: center;

2
src/pages/index/components/chat/ChatQuickAccess/index.vue
View File

@ -96,5 +96,5 @@ const initData = () => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/chat/ChatQuickAccess/styles/index.scss
View File

@ -50,7 +50,7 @@
text {
font-weight: 500;
font-size: 12px;
font-size: $uni-font-size-sm;
color: #201f32;
line-height: 16px;
}

2
src/pages/index/components/chat/ChatTopBgImg/index.vue
View File

@ -5,5 +5,5 @@
<script></script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/chat/ChatTopNavBar/index.vue
View File

@ -33,5 +33,5 @@ const closeDrawer = (e) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/chat/ChatTopWelcome/index.vue
View File

@ -49,5 +49,5 @@ const backgroundStyle = computed(() => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/drawer/DrawerHome/index.vue
View File

@ -50,5 +50,5 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/drawer/DrawerHome/styles/index.scss
View File

@ -15,7 +15,7 @@
.title {
font-size: 18px;
text-align: center;
color: #333333;
color: $uni-text-color;
}
.close-icon {

2
src/pages/index/components/drawer/MineSetting/index.vue
View File

@ -115,5 +115,5 @@ const handleLogout = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages/index/components/drawer/MineSetting/styles/index.scss
View File

@ -32,7 +32,7 @@
.label {
font-size: 28rpx;
color: #333;
color: $uni-text-color;
}
.value {
@ -59,7 +59,7 @@
height: 42px;
margin-top: 40px;
background-color: #fff;
color: #333;
color: $uni-text-color;
border-radius: 8rpx;
border: none;
}

2
src/pages/index/components/module/ActivityListComponent/index.vue
View File

@ -45,5 +45,5 @@ const handleClick = (item) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages/index/components/module/ActivityListComponent/styles/index.scss
View File

@ -27,8 +27,8 @@
right: 12px;
bottom: 12px;
background-color: #ffeb00;
color: #333;
font-size: 14px;
color: $uni-text-color;
font-size: $uni-font-size-base;
font-weight: 500;
padding: 4px 12px;
border-radius: 20px;

2
src/pages/index/components/module/AttachListComponent/index.vue
View File

@ -41,5 +41,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages/index/components/module/AttachListComponent/styles/index.scss
View File

@ -5,7 +5,7 @@
}
.tag-item {
background-color: #ffffff;
background-color: $uni-bg-color;
border-radius: 8px;
padding: 4px 10px;
margin-right: 8px;
@ -17,5 +17,5 @@
.tag-text {
color: #00a6ff; /* 蓝色文字，可根据设计调整 */
font-size: 14px;
font-size: $uni-font-size-base;
}

2
src/pages/index/components/module/DetailCardCompontent/index.vue
View File

@ -26,5 +26,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/module/DetailCardGoodsContentList/index.vue
View File

@ -69,5 +69,5 @@ const placeOrderHandle = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages/index/components/module/DetailCardGoodsContentList/styles/index.scss
View File

@ -15,7 +15,7 @@
flex-direction: column;
align-items: start;
width: 188px;
background-color: #ffffff;
background-color: $uni-bg-color;
border-radius: 10px;
margin-right: 8px;
padding-bottom: 12px;
@ -26,7 +26,7 @@
left: 8px;
background: #ffe7b2;
color: #b97a00;
font-size: 12px;
font-size: $uni-font-size-sm;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;

2
src/pages/index/components/module/DiscoveryCardComponent/index.vue
View File

@ -33,5 +33,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/module/DiscoveryCradContentList/index.vue
View File

@ -38,5 +38,5 @@ const sendReply = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

6
src/pages/index/components/module/DiscoveryCradContentList/styles/index.scss
View File

@ -11,7 +11,7 @@
align-items: start;
width: 188px;
height: 154px;
background-color: #ffffff;
background-color: $uni-bg-color;
border-radius: 10px;
margin-right: 8px;
position: relative;
@ -25,8 +25,8 @@
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333333;
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
}
}

2
src/pages/index/components/module/QuickBookingCalender/index.vue
View File

@ -71,5 +71,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/module/QuickBookingComponent/index.vue
View File

@ -62,5 +62,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/module/QuickBookingContentList/index.vue
View File

@ -67,5 +67,5 @@ const placeOrderHandle = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

4
src/pages/index/components/module/QuickBookingContentList/styles/index.scss
View File

@ -14,7 +14,7 @@
align-items: start;
width: 188px;
// height: 244px;
background-color: #ffffff;
background-color: $uni-bg-color;
border-radius: 10px;
margin-right: 8px;
padding-bottom: 12px;
@ -25,7 +25,7 @@
left: 8px;
background: #ffe7b2;
color: #b97a00;
font-size: 12px;
font-size: $uni-font-size-sm;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;

2
src/pages/index/components/module/RecommendPostsComponent/index.vue
View File

@ -22,5 +22,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

2
src/pages/index/components/module/RecommendPostsList/index.vue
View File

@ -37,5 +37,5 @@ const sendReply = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

Some files were not shown because too many files have changed in this diff Show More