From 9c917b5b42dad3a61213030795c3ae701283cdda Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Mon, 22 Jan 2024 15:50:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(css):=20css=20=E5=8F=98=E9=87=8F=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E5=8F=8A=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                          | 16 +++++--
 pages/CSS/variable/variable.test.js | 14 ++++++
 pages/CSS/variable/variable.uvue    | 30 ++++++++++++
 pages/tabBar/CSS.uvue               | 74 ++++++++++++++++-------------
 4 files changed, 97 insertions(+), 37 deletions(-)
 create mode 100644 pages/CSS/variable/variable.test.js
 create mode 100644 pages/CSS/variable/variable.uvue

diff --git a/pages.json b/pages.json
index 516c84af..c9cd5c15 100644
--- a/pages.json
+++ b/pages.json
@@ -993,11 +993,17 @@
         "navigationBarTitleText": "Scale"
       }
     },
-    {
-      "path": "pages/CSS/transform/rotate",
-      "style": {
-        "navigationBarTitleText": "Rotate"
-      }
+    {
+      "path": "pages/CSS/transform/rotate",
+      "style": {
+        "navigationBarTitleText": "Rotate"
+      }
+    },
+    {
+      "path": "pages/CSS/variable/variable",
+      "style": {
+        "navigationBarTitleText": "css 变量"
+      }
     },
     {
       "path": "pages/tabBar/template",
diff --git a/pages/CSS/variable/variable.test.js b/pages/CSS/variable/variable.test.js
new file mode 100644
index 00000000..5891aaa3
--- /dev/null
+++ b/pages/CSS/variable/variable.test.js
@@ -0,0 +1,14 @@
+describe('css-variable', () => {
+  let page;
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/CSS/variable/variable');
+    await page.waitFor('view');
+  });
+
+  it('screenshot', async () => {
+    const image = await program.screenshot({
+      fullPage: true
+    })
+    expect(image).toMatchImageSnapshot()
+  });
+});
diff --git a/pages/CSS/variable/variable.uvue b/pages/CSS/variable/variable.uvue
new file mode 100644
index 00000000..5077d052
--- /dev/null
+++ b/pages/CSS/variable/variable.uvue
@@ -0,0 +1,30 @@
+<template>
+  <view class="page">
+    <view class="status-bar-height">
+      <text>status bar height</text>
+    </view>
+    <view class="window-top">
+      <text>window top</text>
+    </view>
+    <view class="window-bottom">
+      <text>window bottom</text>
+    </view>
+  </view>
+</template>
+
+<style>
+  .status-bar-height {
+    height: var(--status-bar-height);
+    background-color: red;
+  }
+
+  .window-top {
+    height: var(--window-top);
+    background-color: green;
+  }
+
+  .window-bottom {
+    height: var(--window-bottom);
+    background-color: blue;
+  }
+</style>
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index f480b4af..93d891cf 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -1,7 +1,7 @@
 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-    <!-- #endif -->
+  <!-- #endif -->
     <view class="uni-container">
       <view class="uni-header-logo">
         <image class="uni-header-image" src="/static/cssIndex.png"></image>
@@ -24,7 +24,7 @@
         </template>
       </uni-collapse>
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
@@ -83,22 +83,22 @@
               {
                 name: 'border-radius',
                 url: '/pages/CSS/border/border-radius',
-              },
-              {
-                name: 'border-top',
-                url: '/pages/CSS/border/border-top',
-              },
-              {
-                name: 'border-bottom',
-                url: '/pages/CSS/border/border-bottom',
-              },
-              {
-                name: 'border-left',
-                url: '/pages/CSS/border/border-left',
-              },
-              {
-                name: 'border-right',
-                url: '/pages/CSS/border/border-right',
+              },
+              {
+                name: 'border-top',
+                url: '/pages/CSS/border/border-top',
+              },
+              {
+                name: 'border-bottom',
+                url: '/pages/CSS/border/border-bottom',
+              },
+              {
+                name: 'border-left',
+                url: '/pages/CSS/border/border-left',
+              },
+              {
+                name: 'border-right',
+                url: '/pages/CSS/border/border-right',
               },
               {
                 name: 'border属性复合示例',
@@ -203,10 +203,10 @@
               {
                 name: 'width',
                 url: '/pages/CSS/layout/width',
-              },
-              {
-                name: 'z-index',
-                url: '/pages/CSS/layout/z-index',
+              },
+              {
+                name: 'z-index',
+                url: '/pages/CSS/layout/z-index',
               },
               {
                 name: 'visibility',
@@ -265,16 +265,16 @@
                 url: '/pages/CSS/padding/padding',
               },
             ] as Page[],
-          },
-          {
-            id: 'overflow',
-            name: 'overflow',
-            pages: [
-              {
-                name: 'overflow',
-                url: '/pages/CSS/overflow/overflow',
-              },
-            ] as Page[],
+          },
+          {
+            id: 'overflow',
+            name: 'overflow',
+            pages: [
+              {
+                name: 'overflow',
+                url: '/pages/CSS/overflow/overflow',
+              },
+            ] as Page[],
           },
           {
             id: 'text',
@@ -349,6 +349,16 @@
                 url: '/pages/CSS/transition/transition',
               },
             ] as Page[],
+          },
+          {
+            id: 'variable',
+            name: 'variable',
+            pages: [
+              {
+                name: 'variable',
+                url: '/pages/CSS/variable/variable',
+              },
+            ] as Page[],
           }
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',
-- 
GitLab