用户详情子组件使用scss定义样式

src/views/platform/buyDetail.vue

@@ -86,7 +86,7 @@ export default {
 
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .query-form {
     margin-bottom: 20px;
 }

src/views/platform/discount.vue

@@ -85,7 +85,7 @@ export default {
 
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .query-form {
     margin-bottom: 20px;
 }
@@ -94,7 +94,9 @@ export default {
     font-weight: bold;
 }
 
-.count>div {
+.count {
+    div {
         margin-bottom: 20px;
     }
+}
 </style>

src/views/platform/result/card.vue

@@ -24,7 +24,7 @@ export default {
     }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .price {
     color: red;
     font-weight: bold;

src/views/platform/result/collect.vue

@@ -52,7 +52,7 @@ export default {
     }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .total,
 .shop-card {
     margin-bottom: 20px;

src/views/platform/result/history.vue

@@ -59,7 +59,7 @@ export default {
     }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .total,
 .shop-card {
     margin-bottom: 20px;

src/views/platform/walletDetail.vue

@@ -102,13 +102,16 @@ export default {
 
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
+$space: 20px;
+
 .query-form {
-    margin-top: var(--space);
+    margin-top: $space;
-    margin-bottom: calc(var(--space) * 2);
+    margin-bottom: #{$space * 2};
 }
 
-.balance>div {
+.balance {
+    &>div {
         background-color: rgba(22, 132, 252, 0.2);
         height: 80px;
         color: rgba(16, 16, 16, 1);
@@ -121,13 +124,13 @@ export default {
         justify-content: center;
         align-items: center;
 
-}
+        &>div:first-child {
-
-.balance>div>div:first-child {
             margin-bottom: 5px;
         }
+    }
 
-.balance>div:not(:first-child) {
+    &>div:not(:first-child) {
         margin-left: 20px;
     }
+}
 </style>

src/views/system/user/index.vue

@@ -487,11 +487,7 @@ export default {
   }
 };
 </script>
-<style >
+<style scoped lang="scss">
-:root {
-  --space: 20px;
-}
-
 .custom-divider.el-divider {
   margin-top: 0 !important;
   margin-bottom: 20px !important;