Home Explore Help
Register Sign In
TwoKe
/
zhgkpt-datav
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

feat: 新增通用组件渐进色文字

TwoKe945 1 year ago
parent
2e0c23fbc7
commit
0ba3451e07
12 changed files with 158 additions and 44 deletions
Unified View Show Diff Stats
  1. 1 1
      app/index.html
  2. 1 0
      app/package.json
  3. 15 5
      app/src/components/Headers.vue
  4. 0 2
      app/src/main.js
  5. 28 10
      app/src/views/HomeView.vue
  6. 11 22
      components/BorderPanel/index.vue
  7. 4 0
      components/LinearText/index.js
  8. 68 0
      components/LinearText/index.vue
  9. 4 3
      components/index.js
  10. 20 0
      pnpm-lock.yaml
  11. 2 0
      utils/index.js
  12. 4 1
      utils/package.json

+ 1 - 1
app/index.html
View File 

@@ -3,7 +3,7 @@
 
   <head>
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <link rel="icon" href="/favicon.ico" />
 
     <link rel="icon" href="/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Vite App</title>
 
     <title>Vite App</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>

+ 1 - 0
app/package.json
View File 

@@ -22,6 +22,7 @@
 
     "@vitejs/plugin-vue2-jsx": "^1.0.2",
 
     "@vitejs/plugin-vue2-jsx": "^1.0.2",
 
     "autoprefixer": "^10.4.14",
 
     "autoprefixer": "^10.4.14",
 
     "postcss-plugin-px2rem": "^0.8.1",
 
     "postcss-plugin-px2rem": "^0.8.1",
 
+    "postcss-px-to-viewport": "^1.1.1",
 
     "terser": "^5.14.2",
 
     "terser": "^5.14.2",
 
     "vite": "^3.0.2",
 
     "vite": "^3.0.2",
 
     "vitest": "^0.18.1",
 
     "vitest": "^0.18.1",

+ 15 - 5
app/src/components/Headers.vue
View File 

@@ -4,15 +4,21 @@
 
  <div class="title-card">  
  <div class="title-card">  
     <li class="bg-img" @click="ConfirmBtn(1)" :class="getClass(1)">
 
     <li class="bg-img" @click="ConfirmBtn(1)" :class="getClass(1)">
 
         <img src="../assets/Vector.png" alt="">
 
         <img src="../assets/Vector.png" alt="">
 
-        总览
 
+        <linear-text text="总览" startColor="#95CCFF" endColor="#fff"
 
+            fontSize="20px" />
 
     </li> 
     </li> 
     <ul   v-for="(item,index) in titleList" :key="index">   
     <ul   v-for="(item,index) in titleList" :key="index">   
-        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)">{{ item.name }}</li> 
+        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)">
 
+        <linear-text :text="item.name" startColor="#95CCFF" endColor="#fff"
 
+        fontSize="20px"
 
+      /></li> 
  </ul>
 
  </ul>
 
  </div>
 
  </div>
 
  <div class="title-card"> 
  <div class="title-card"> 
      <ul v-for="(item,index) in titleList1" :key="index" >  
      <ul v-for="(item,index) in titleList1" :key="index" >  
-        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)">{{ item.name }}</li> 
+        <li class="bg-img" @click="ConfirmBtn(item.id)" :class="getClass(item.id)"> <linear-text :text="item.name" startColor="#95CCFF" endColor="#fff"
 
+            fontSize="20px"
 
+      /></li> 
  </ul>
 
  </ul>
 
  <li class="bg-img" @click="ConfirmBtn(8)" :class="getClass(8)">
 
  <li class="bg-img" @click="ConfirmBtn(8)" :class="getClass(8)">
 
         <img src="../assets/out.png" alt="">   
         <img src="../assets/out.png" alt="">   
@@ -100,7 +106,7 @@ export default{
 
  /* width: 400px; */
 
  /* width: 400px; */
 
 display: flex;
 
 display: flex;
 
 padding: 40px 20px ;
 
 padding: 40px 20px ;
 
-font-size: 18px;
 
+font-size: 20px;
 
 }
 
 }
 
 img{
 
 img{
 
   width: 16px;
 
   width: 16px;
 
@@ -118,6 +124,10 @@ img{
 
     background: url('../assets/btn.png')  no-repeat;
 
     background: url('../assets/btn.png')  no-repeat;
 
     background-size: 100% 100%;
 
     background-size: 100% 100%;
 
     text-align: center;
 
     text-align: center;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    padding-left: 10px;
 
     line-height: 49px;
 
     line-height: 49px;
 
 }
 
 }
 
 .bg-img:hover{
 
 .bg-img:hover{
 
@@ -134,4 +144,4 @@ img{
 
     line-height: 49px;
 
     line-height: 49px;
 
 }
 
 }
 
 
 
-</style>
 
+</style>

+ 0 - 2
app/src/main.js
View File 

@@ -1,10 +1,8 @@
 
 import Vue from "vue";
 
 import Vue from "vue";
 
 import { createPinia, PiniaVuePlugin } from "pinia";
 
 import { createPinia, PiniaVuePlugin } from "pinia";
 
 import DataVComponent from "@zhgkpt/components";
 
 import DataVComponent from "@zhgkpt/components";
 
-
 
 import App from "./App.vue";
 
 import App from "./App.vue";
 
 import router from "./router";
 
 import router from "./router";
 
-// import 'lib-flexible'
 
 
 
 import "./assets/main.css";
 
 import "./assets/main.css";

+ 28 - 10
app/src/views/HomeView.vue
View File 

@@ -2,22 +2,40 @@
 
   <!-- <main>
 
   <!-- <main>
 
     <header />
 
     <header />
 
   </main> -->
 
   </main> -->
 
-  <div class="home">
 
-    <div >
 
-      <Headers />
 
-      <div>
 
-            <border-panel title="基础信息">
 
+    <div class="home">
 
+    <Headers />
 
+    <div>
 
+      <div style="padding: 0px 35px; display: flex; justify-content: space-between;">
 
+        <div>
 
+        <border-panel height="302px" style="margin-bottom: 6px;" title="基础信息">
 
           1111
 
           1111
 
         </border-panel>
 
         </border-panel>
 
-        <border-panel title="隐患排查（一楼一策）">
 
+        <border-panel height="346px" style="margin-bottom: 6px;"  title="隐患排查（一楼一策）">
 
           2222
 
           2222
 
         </border-panel>
 
         </border-panel>
 
-        <border-panel title="自主管理">
 
+        <border-panel height="296px"  title="自主管理">
 
           3333
 
           3333
 
         </border-panel>
 
         </border-panel>
 
-        <border-panel title="警情动态" width="938px" height="321px"  :header-type="1">
 
-          4444
 
-        </border-panel>
 
+        </div>
 
+        <div class="display: flex;">
 
+          <div style=""></div>
 
+          <div>
 
+            <border-panel title="警情动态" width="938px" height="321px"  :header-type="1">
 
+              4444
 
+            </border-panel>
 
+          </div>
 
+        </div>
 
+        <div>
 
+          <border-panel height="311px"  style="margin-bottom: 6px;" title="风险预警">
 
+          1111
 
+          </border-panel>
 
+          <border-panel height="331px"  style="margin-bottom: 6px;" title="智慧消防">
 
+            2222
 
+          </border-panel>
 
+          <border-panel height="298px"  title="火灾指标">
 
+            3333
 
+          </border-panel>
 
+        </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>

+ 11 - 22
components/BorderPanel/index.vue
View File 

@@ -3,7 +3,13 @@
 
     <div class="border-panel_header" :style="{
 
     <div class="border-panel_header" :style="{
 
       backgroundImage: `url(${headerImageBgUrl})`
 
       backgroundImage: `url(${headerImageBgUrl})`
 
     }" >
 
     }" >
 
-      <div class="title" :data-text="title">{{title}}</div>
 
+      <linear-text :text="title" startColor="#95CCFF" endColor="#fff"
 
+        :extClass='{
 
+          top: "11px",
 
+          left: "35px",
 
+          textShadow: "0 1px 1px #0057FF"
 
+        }'
 
+      />
 
     </div>
 
     </div>
 
     <div class="border-panel_content">
 
     <div class="border-panel_content">
 
       <slot></slot>
 
       <slot></slot>
 
@@ -13,11 +19,15 @@
 
 
 
 <script >
 
 <script >
 
 import { headerTitleBgs } from './data'
 
 import { headerTitleBgs } from './data'
 
+import LinearText from "../LinearText";
 
 /**
 
 /**
 
  * 边框面板
 
  * 边框面板
 
  */
 
  */
 
 export default {
 
 export default {
 
   name: "BorderPanel",
 
   name: "BorderPanel",
 
+  components: {
 
+    LinearText
 
+  },
 
   props: {
 
   props: {
 
     title: {
 
     title: {
 
       type: String,
 
       type: String,
 
@@ -70,27 +80,6 @@ export default {
 
   background-position: var(--header-ops) 0px;
 
   background-position: var(--header-ops) 0px;
 
 }
 
 }
 
 
 
-.border-panel_header .title {
 
-  position: relative;
 
-  color: #95CCFF;
 
-  font-size: 24px;
 
-  line-height: 24px;
 
-  top: 11px;
 
-  left: 35px;
 
-  text-shadow: 0 1px 1px #0057FF;
 
-}
 
-.border-panel_header .title::after {
 
-  content: attr(data-text);
 
-  position: absolute;
 
-  width: 100%;
 
-  height: 100%;
 
-  left: 0;
 
-  top: 0;
 
-  z-index: 1;
 
-  color: #fff;
 
-  -webkit-mask: linear-gradient(180deg, #95CCFF, transparent);
 
-}
 
-
 
 .border-panel::after {
 
 .border-panel::after {
 
   content: "";
 
   content: "";
 
   position: absolute;
 
   position: absolute;

+ 4 - 0
components/LinearText/index.js
View File 

@@ -0,0 +1,4 @@
 
+import LinearText from './index.vue'
 
+import { withInstall } from '@zhgkpt/utils'
 
+
 
+export default withInstall(LinearText)

+ 68 - 0
components/LinearText/index.vue
View File 

@@ -0,0 +1,68 @@
 
+<template >
 
+  <div class="linear-text" :style="linearTextStyle" :data-text="text">
 
+    {{ text }}
 
+  </div>
 
+</template>
 
+<script>
 
+
 
+export default {
 
+  name: 'LinearText',
 
+  props: {
 
+    text: {
 
+      type: String,
 
+      default: ""
 
+    },
 
+    fontSize: {
 
+      type: String,
 
+      default: "24px"
 
+    },
 
+    lineHeight: {
 
+      type: String,
 
+      default: "24px"
 
+    },
 
+    extClass: {
 
+      type: Object,
 
+      default: () => ({})
 
+    },
 
+    startColor: {
 
+      type: String,
 
+      default: "#95CCFF"
 
+    },
 
+    endColor: {
 
+      type: String,
 
+      default: "#fff"
 
+    }
 
+  },
 
+  computed: {
 
+    linearTextStyle() {
 
+      return {
 
+        '--font-size': this.fontSize,
 
+        '--line-height': this.lineHeight,
 
+        '--start-color': this.startColor,
 
+        '--end-color': this.endColor,
 
+        ...this.extClass
 
+      }
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+.linear-text {
 
+  position: relative;
 
+  color: var(--start-color);
 
+  font-size: var(--font-size);
 
+  line-height: var(--line-height);
 
+}
 
+.linear-text::after {
 
+  content: attr(data-text);
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100%;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 1;
 
+  color: var(--end-color);
 
+  -webkit-mask: linear-gradient(180deg, var(--start-color), transparent);
 
+}
 
+</style>

+ 4 - 3
components/index.js
View File 

@@ -1,5 +1,6 @@
 
 import BorderPanel from "./BorderPanel";
 
 import BorderPanel from "./BorderPanel";
 
-const components = [BorderPanel];
 
+import LinearText from "./LinearText";
 
+const components = [BorderPanel, LinearText];
 
 
 
 function install(app) {
 
 function install(app) {
 
   components.forEach((item) => {
 
   components.forEach((item) => {
 
@@ -7,8 +8,8 @@ function install(app) {
 
   });
 
   });
 
 }
 
 }
 
 
 
-export { BorderPanel };
 
+export { BorderPanel, LinearText};
 
 
 
 export default {
 
 export default {
 
-  install,
 
+  install
 
 };
 
 };

+ 20 - 0
pnpm-lock.yaml
View File 

@@ -34,6 +34,7 @@ importers:
 
       lib-flexible: ^0.3.2
 
       lib-flexible: ^0.3.2
 
       pinia: ^2.0.16
 
       pinia: ^2.0.16
 
       postcss-plugin-px2rem: ^0.8.1
 
       postcss-plugin-px2rem: ^0.8.1
 
+      postcss-px-to-viewport: ^1.1.1
 
       terser: ^5.14.2
 
       terser: ^5.14.2
 
       vite: ^3.0.2
 
       vite: ^3.0.2
 
       vitest: ^0.18.1
 
       vitest: ^0.18.1
 
@@ -52,6 +53,7 @@ importers:
 
       '@vitejs/plugin-vue2-jsx': 1.1.0_vite@3.2.7+vue@2.7.14
 
       '@vitejs/plugin-vue2-jsx': 1.1.0_vite@3.2.7+vue@2.7.14
 
       autoprefixer: 10.4.14
 
       autoprefixer: 10.4.14
 
       postcss-plugin-px2rem: 0.8.1
 
       postcss-plugin-px2rem: 0.8.1
 
+      postcss-px-to-viewport: 1.1.1
 
       terser: 5.17.6
 
       terser: 5.17.6
 
       vite: 3.2.7_terser@5.17.6
 
       vite: 3.2.7_terser@5.17.6
 
       vitest: 0.18.1_terser@5.17.6
 
       vitest: 0.18.1_terser@5.17.6
 
@@ -77,6 +79,12 @@ importers:
 
       jsdom: 20.0.3
 
       jsdom: 20.0.3
 
       prettier: 2.8.8
 
       prettier: 2.8.8
 
 
 
+  utils:
 
+    specifiers:
 
+      lodash: ^4.17.21
 
+    devDependencies:
 
+      lodash: 4.17.21
 
+
 
 packages:
 
 packages:
 
 
 
   /@ampproject/remapping/2.2.1:
 
   /@ampproject/remapping/2.2.1:
 
@@ -1904,6 +1912,11 @@ packages:
 
   /nwsapi/2.2.5:
 
   /nwsapi/2.2.5:
 
     resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==}
 
     resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==}
 
 
 
+  /object-assign/4.1.1:
 
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
 
+    engines: {node: '>=0.10.0'}
 
+    dev: true
 
+
 
   /once/1.4.0:
 
   /once/1.4.0:
 
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
     dependencies:
 
     dependencies:
 
@@ -1989,6 +2002,13 @@ packages:
 
       postcss: 5.2.18
 
       postcss: 5.2.18
 
     dev: true
 
     dev: true
 
 
 
+  /postcss-px-to-viewport/1.1.1:
 
+    resolution: {integrity: sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==}
 
+    dependencies:
 
+      object-assign: 4.1.1
 
+      postcss: 8.4.24
 
+    dev: true
 
+
 
   /postcss-selector-parser/6.0.13:
 
   /postcss-selector-parser/6.0.13:
 
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
 
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
 
     engines: {node: '>=4'}
 
     engines: {node: '>=4'}

+ 2 - 0
utils/index.js
View File 

@@ -1,3 +1,5 @@
 
+
 
+
 
 export function withInstall(component) {
 
 export function withInstall(component) {
 
   component.install = function (app) {
 
   component.install = function (app) {
 
     app.component(component.name, component);
 
     app.component(component.name, component);

+ 4 - 1
utils/package.json
View File 

@@ -10,5 +10,8 @@
 
   "module": "index.js",
 
   "module": "index.js",
 
   "type": "module",
 
   "type": "module",
 
   "author": "",
 
   "author": "",
 
-  "license": "ISC"
 
+  "license": "ISC",
 
+  "devDependencies": {
 
+    "lodash": "^4.17.21"
 
+  }
 
 }
 
 }