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

2025-10-06 13:13:16 +08:00
parent e0f0e90635
commit c8e51e4975
108 changed files with 366 additions and 517 deletions
--- a/src/components/AddCarCrad/index.vue
+++ b/src/components/AddCarCrad/index.vue
@@ -25,5 +25,5 @@ const props = defineProps({
 </script>

 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/Calender/index.vue
+++ b/src/components/Calender/index.vue
@@ -474,5 +474,5 @@ onBeforeUnmount(() => {

 <style lang="scss" scoped>
 // 引入样式文件
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/CheckBox/index.vue
+++ b/src/components/CheckBox/index.vue
@@ -40,5 +40,5 @@ const onChange = () => {
 </script>

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

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/CommandWrapper/styles/index.scss
+++ b/src/components/CommandWrapper/styles/index.scss
@@ -7,5 +7,5 @@

 .command-text {
  color: #fff;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
 }
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -252,5 +252,5 @@ onMounted(() => {
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/CreateServiceOrder/styles/index.scss
+++ b/src/components/CreateServiceOrder/styles/index.scss
@@ -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;
 }

--- a/src/components/Divider/index.vue
+++ b/src/components/Divider/index.vue
@@ -3,5 +3,5 @@
 </template>

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

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/Feedback/styles/index.scss
+++ b/src/components/Feedback/styles/index.scss
@@ -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;
 }

--- a/src/components/FormCard/index.vue
+++ b/src/components/FormCard/index.vue
@@ -175,5 +175,5 @@ defineExpose({
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/FormCard/styles/index.scss
+++ b/src/components/FormCard/styles/index.scss
@@ -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;
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -58,5 +58,5 @@ const props = defineProps({
 </script>

 <style scoped lang="scss">
-@use './styles/index.scss';
+@import "./styles/index.scss";
 </style>
--- a/src/components/GoodDetail/styles/index.scss
+++ b/src/components/GoodDetail/styles/index.scss
@@ -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;
--- a/src/components/ImageSwiper/index.vue
+++ b/src/components/ImageSwiper/index.vue
@@ -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>
--- a/src/components/LocationCard/index.vue
+++ b/src/components/LocationCard/index.vue
@@ -48,5 +48,5 @@ const openMap = () => {
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/LocationCard/styles/index.scss
+++ b/src/components/LocationCard/styles/index.scss
@@ -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;
  }

--- a/src/components/LocationInfo/index.vue
+++ b/src/components/LocationInfo/index.vue
@@ -42,5 +42,5 @@ const openMap = () => {
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/LocationInfo/styles/index.scss
+++ b/src/components/LocationInfo/styles/index.scss
@@ -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;
--- a/src/components/ModuleTitle/index.vue
+++ b/src/components/ModuleTitle/index.vue
@@ -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>
--- a/src/components/OrderCardItem/index.vue
+++ b/src/components/OrderCardItem/index.vue
@@ -48,5 +48,5 @@ const orderStatusText = computed(() => {
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/OrderCardItem/styles/index.scss
+++ b/src/components/OrderCardItem/styles/index.scss
@@ -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;
 }
--- a/src/components/Privacy/index.vue
+++ b/src/components/Privacy/index.vue
@@ -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>
--- a/src/components/ResponseIntro/index.vue
+++ b/src/components/ResponseIntro/index.vue
@@ -17,5 +17,5 @@ defineProps({
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/ResponseIntro/styles/index.scss
+++ b/src/components/ResponseIntro/styles/index.scss
@@ -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;
 }
--- a/src/components/ResponseWrapper/index.vue
+++ b/src/components/ResponseWrapper/index.vue
@@ -7,5 +7,5 @@
 <script setup></script>

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

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/ServiceTipsWord/styles/index.scss
+++ b/src/components/ServiceTipsWord/styles/index.scss
@@ -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;
--- a/src/components/Stepper/index.vue
+++ b/src/components/Stepper/index.vue
@@ -59,5 +59,5 @@ const increase = () => {
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/Stepper/styles/index.scss
+++ b/src/components/Stepper/styles/index.scss
@@ -6,6 +6,6 @@
 .stepper-text {
  width: 40px;
  font-size: 16px;
-  color: #333;
+  color: $uni-text-color;
  text-align: center;
 }
--- a/src/components/SumCard/index.vue
+++ b/src/components/SumCard/index.vue
@@ -25,5 +25,5 @@ defineProps({
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/SumCard/styles/index.scss
+++ b/src/components/SumCard/styles/index.scss
@@ -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;
 }
--- a/src/components/TagsGroup/index.vue
+++ b/src/components/TagsGroup/index.vue
@@ -11,5 +11,5 @@ const tags = ["门票套餐", "民俗活动", "车程路况"];
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/TagsGroup/styles/index.scss
+++ b/src/components/TagsGroup/styles/index.scss
@@ -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;
-}
+}
--- a/src/components/TopNavBar/index.vue
+++ b/src/components/TopNavBar/index.vue
@@ -140,5 +140,5 @@ const handleBack = () => {
 </script>

 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>
--- a/src/components/TopNavBar/styles/index.scss
+++ b/src/components/TopNavBar/styles/index.scss
@@ -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;