用户详情子组件使用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 {
-    margin-bottom: 20px;
+.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,32 +102,35 @@ export default {
 
 }
 </script>
-<style scoped>
-.query-form {
-    margin-top: var(--space);
-    margin-bottom: calc(var(--space) * 2);
-}
-
-.balance>div {
-    background-color: rgba(22, 132, 252, 0.2);
-    height: 80px;
-    color: rgba(16, 16, 16, 1);
-    font-size: 16px;
-    text-align: left;
-    font-family: SourceHanSansSC-medium;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+<style scoped lang="scss">
+$space: 20px;
 
+.query-form {
+    margin-top: $space;
+    margin-bottom: #{$space * 2};
 }
 
-.balance>div>div:first-child {
-    margin-bottom: 5px;
-}
+.balance {
+    &>div {
+        background-color: rgba(22, 132, 252, 0.2);
+        height: 80px;
+        color: rgba(16, 16, 16, 1);
+        font-size: 16px;
+        text-align: left;
+        font-family: SourceHanSansSC-medium;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &>div:first-child {
+            margin-bottom: 5px;
+        }
+    }
 
-.balance>div:not(:first-child) {
-    margin-left: 20px;
+    &>div:not(:first-child) {
+        margin-left: 20px;
+    }
 }
 </style>

src/views/system/user/index.vue

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