全面svg化以及设备页实现list滚动

quickapp/src/assets/images/calander.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="92" height="95" viewBox="0 0 92 95">
-  <text id="calander" transform="translate(0 76)" fill="#a7a7a7" font-size="80" font-family="STSong, SF Compact"><tspan x="0" y="0">􀉉</tspan></text>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="92" height="95" viewBox="0 0 92 95">
+  <image id="calander" width="92" height="95" xlink:href="data:image/png;base64,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"/>
 </svg>

quickapp/src/assets/images/device-ipad.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="105" height="95" viewBox="0 0 105 95">
-  <text id="device-ipad" transform="translate(0 76)" fill="#3b4789" font-size="80" font-family="STSong, SF Compact"><tspan x="0" y="0">􀥔</tspan></text>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="105" height="95" viewBox="0 0 105 95">
+  <image id="device-ipad" width="105" height="95" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAABfCAYAAADroemKAAAABHNCSVQICAgIfAhkiAAABnpJREFUeF7tnV1oHFUUgO+dzV9Tay3WGqxtQZIqiBKJNXY3SkizG4r4g1ihiCBo8QdRrDa7bVCD1mZnqyiKolAf6kMFS4mgkGRrJNjupjEWW8W+NOZBRa21Vqqtabo7x7PBYtHZ3XM3055M9uxLIHPmnHu/b+7M3RDOaCWfGU9Az/gRygCVSPLBRSCSRJIPCPhgiLKSRJIPCPhgiLKSRJIPCPhgiLKSRJIPCPhgiLKSRJIPCPhgiLKSRJIPCPhgiNNcSaBXtscbLSuwHBTUY7IGnHM9aFisQVk+mP95GSIodUopPYZMDmv8iVwOI46D6eSGX0opWLKkYDjRqC3nDRxMSymFy+4cgAlQOl41+Zc9NNQ9YTJ/Y0ktLT0LYK5+EeU8goUCJsUkFgkAjDvKenI42fkxlYeRpKamdyprFh7/EgVdSy0gcXkIgHoolYy+S+FjJCnYYUfxhDglscQUJgAAxzJZ5+rPBzcdK8aKLCnY9vIyVZk5hA/C2mJJ5TiNAG4wtqUHouuKRZMlhTrsXZjs7mIJ8Qo5orQeV6Ami8XO1uNaw0J8JNTj/KoLzRFw+6eyTnN6cONooTgTSScw0TzXZAAZ/P1rjq7qGR5Y/9tshW82r24r1F4ThIB6He8+N+Q/F7pSA7Et05a0ojVRV1UNP+VLlAW4Y18y9pHZJMokes0HgdCJ8X5cWe3uF7jajhuIB6YtKdSRuAX3jp/lWUW9qWSs6G2wTJS4TrM5nGiosOBrt9sfPh7S6WQsNH1JEftB/OevbW6JHAX3DQ/EdpSzBMrcQ5H4PnxWN7vE/poaiF42bUnBsB3Xloq6JnLUitTu6BeUgZZzDH59eQ83APe7MTh5umrBgaGnfs/Hh7RxCEbib2mtH3VLkslk6kYGu46UswDK3IMRe7PWqsstdhIqlo4mn/7+vEmyrOyiPX2bjlIGWs4x+BXmBZz/syJpBl8FImkGyzk7NJEkkpQqtHGQZxLtCpGVROPEGiWSWPHTioskGifWKJHEip9WXCTROLFGiSRW/LTiIonGiTVKJLHipxUXSTROrFEiiRU/rbhIonFijRJJrPhpxUUSjRNrlEhixU8rLpJonFijRBIrflpxkUTjxBolkljx04qLJBon1iiRxIqfVlwk0TixRokkVvy04iKJxok1SiSx4qcVF0k0TqxRIokVP624SKJxYo0SSaz4acVFEo0Ta5RIYsVPKy6SaJxYo0QSK35acZFE48QaJZJY8dOKiyQaJ9YokcSKn1ZcJNE4sUbNQknYyjqcaMN+Ro0XlCzAqTOTVu/oUOfPXte9AJLsN7EvzmNuA89YaslIX/QHLye1MhKPWVr3eJmTnAvUyUxgzhUjfU/kmjB69gl2xG1sTtjpltCj3kL28yip233E+tbUQOcez2aDiXBCH+KE7vQyp0kuByA0nIylTc4pFosNoHYiw3v+G5dr8Ym9wmsL9QondenCW89ay4I8Pe30OpTk2guv2MDzHQ+GeyLasrbj8bpSc5RyXg6YVtCPnRxvw06P2MfWuw82LPkKO51d97+MAN9hU8dlhSqRJIXC9o34UgP3Zq4AB1Pzr2pSO+/NejclpVpbuyv+qK4s2KzPy3q5XHNOWhN792487nXemzt62gPK2u2WF6+EQexo7N76858TSJKa2uPzawI6b9M8bFG5OZ2MPuf11ec1LI58zavtKwNZ9Sne6nLv8XD7vI2dI117CZ4NJknKBeM99QgWWpR3ogAjeC+3rYB1aOLoJeP79z98hgPKTKh506otl1ZUVi5XjtOGt88YtvW8KD83vT6V7Hx12re7XIJQxE5gH9YNMwHCrBnD1E5SXVNsd0xeSddHts6dp7KH8KpYOmsgcU8EVCduUrYWGwZZUi7Ryoh9l6VVb7GkcpxCAL6pPD3RiFvvXOP7gh8jSVPPpg57B560tlhiOV6AAMCfylGrU5/E9lI4GUuaWlHhxBpLwyv4jFpCKSIx/xLALff72lHPYJvuH6lcSpKUS950e3dt9WRNroXy4/jXgYupBcsxburFIRoOOBrW7+vfOGTKoGRJ5xZqXvXS5RU60IDv8qtXlm7QoBfjV/eyfaefxj/UOkqN4VcWfKefGsNnz7emr4g7l68nkkyvDIk3IyCSzHixRIskFuxmRUWSGS+WaJHEgt2sqEgy48USLZJYsJsVFUlmvFiiRRILdrOiIsmMF0u0SGLBblb0b96GtI05L1ULAAAAAElFTkSuQmCC"/>
 </svg>

quickapp/src/assets/images/device-iphone.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="75" height="95" viewBox="0 0 75 95">
-  <text id="device-iphone" transform="translate(0 76)" fill="#3b4789" font-size="80" font-family="STSong, SF Compact"><tspan x="0" y="0">􀟜</tspan></text>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="95" viewBox="0 0 75 95">
+  <image id="device-iphone" width="75" height="95" xlink:href="data:image/png;base64,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"/>
 </svg>

quickapp/src/assets/images/plus.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="79" height="95" viewBox="0 0 79 95">
-  <text id="plus" transform="translate(0 76)" fill="#d8d8d8" font-size="80" font-family="STSong, SF Compact"><tspan x="0" y="0">􀅼</tspan></text>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="79" height="95" viewBox="0 0 79 95">
+  <image id="plus" width="79" height="95" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABfCAYAAACp4podAAAABHNCSVQICAgIfAhkiAAAA0NJREFUeF7tmj2IE2EURXc2tbqCIGghCvlDELRREGy0sLARFxZEBEEQRFArWxULbbSwEWwEXdhGOwt7XbQSRMwPCRHBUgSxCeTHO5IiLMnu5DsTmZEbWLJs5rz53smdnYHvRQt+BRuIgkmDC5YHQmB5lgcMANTJszxgAKBOnuUBAwB18iwPGACok2d5wABAnTzLAwYA6uRZHjAAUCfvf5TXbrd39Hq94+pt+2AweF+tVr+CPueCZjJ5jUbjpIStRlG0e9R1X++3K5XKvblYCCyaOXkSt3c4HH5WP0sbe9Lfl5XAl4G9po5lUd5NSXo4pdM3St/p1C0EFsycvHq9/kS9XJnST0fyDgT2mjqWRXlP1eXlSZ0qkd902e5L3UJgQcsLFBdjlmd5wABAnTzLAwYA6uRZHjAAUCfP8oABgDp5lgcMANTJszxgAKBOnuUBAwB18iwPGACok2d5wABAnTzLAwYAOlPyOp3OUrfbPaHz7Z/X/od2yFY0KXBsUk/67Kc+uwv63RRV7R+Li4vrxWKxneQcieU1m81T/X7/xdgIRJL6uTtGX1BPPd5JMtqRSJ42ovfEIxAqujN3NgIXrASeK5VKrzbDE8mr1WrXJO5x4DpyiSksr7XBfgbLU/Luq8itXFoIXLTkfZS8I1ieJpdWVGwtcB25xHSlPSuXy5ewPIkrKH3vVPBoLk3MuGj1+1u9HtJNo4PlxQVGjynx6NeyfrbNuJ5cHD66037QYq9K3KetFp3ohjFeRCeIWq3Wrq0Kh36ux6H4C7owhf9eKBQOh9ZOwP3SM143wXF/D5lZXtLCocfp34NHzCwv1ADgnDzLAwYA6uRZHjAAUCfP8oABgDp5lgcMANTJszxgAKBOnuUBAwB18iwPGACok2d5wABAnTzLAwYA6uRZHjAAUCXvkfAbk0po2/OLRiAOgvKpopnbetRQ0Xnt1q9O6fK5NqMvpmoAFMucvNFox9uNA45JRyCAi5nRzMmLO9ClG49zPJCws3qPf1/XpMB1zcvVZu5wjkAm5Y33G4936DWco4Pg0pmXF9zZPwAtD0i2PMsDBgDq5FkeMABQJ8/ygAGAOnmWBwwA1MmzPGAAoE6e5QEDAP0DDiwVfl1guh8AAAAASUVORK5CYII="/>
 </svg>

quickapp/src/manifest.json

@@ -4,7 +4,7 @@
   "versionName": "1.0.0",
   "versionCode": 1,
   "minPlatformVersion": 1070,
-  "icon": "/assets/images/logo.png",
+  "icon": "/assets/images/logo.svg",
   "features": [
     {
       "name": "system.prompt"
@@ -36,7 +36,7 @@
       },
       "pages/Home": {
         "component": "index",
-        "launchMode":"singleTask"
+        "launchMode": "singleTask"
       }
     }
   },
@@ -46,7 +46,10 @@
     "pages": {
       "pages": {
         "titleBar": false
+      },
+      "pages/Home": {
+        "titleBar": false
       }
     }
   }
-}
+}

quickapp/src/pages/Device/card.ux

@@ -1,21 +1,25 @@
 <template>
-  <div class="card">
+  <list-item type="device" class="card">
     <div class="icon">
       <image src="{{ devObj.icon}}" />
     </div>
     <text class="label">{{ devObj.name }}</text>
-  </div>
+  </list-item>
 </template>
 
 <script>
 export default {
 
-  props: {
-    devObj: { default: { icon: "/assets/images/device-ipad.png", name: "Easy’s iPad(当前设备)" } },
+  props: ['devObj'],
+
+  data: {
+    defaultDevObj: { icon: "/assets/images/device-ipad.svg", name: "Easy’s iPad(当前设备)" },
   },
 
   onInit() {
-    console.log('card', this.devObj, this.devObj.name)
+    if (!this.devObj) this.devObj = this.defaultDevObj
+    // console.log('card', this.devObj)
+    // console.log('card', 'name', this.devObj.name)
   }
 }
 </script>
@@ -24,17 +28,17 @@ export default {
 @color: #3b4789;
 
 .card {
-  width: 80%;
   border-color: @color;
   border-radius: 16px;
   border-width: 3px;
   padding: 32px;
   margin: 24px 0;
+  background-color: #FFFFFF;
   /* justify-content: center;
   align-items: center; */
 
   .icon {
-    width: 130px;
+    width: 120px;
     height: 80px;
     margin-right: 16px;
     justify-content: center;

quickapp/src/pages/Device/index.ux

@@ -3,15 +3,30 @@
   <div class="wrapper">
     <!-- <text class="title">device</text>
     <text class="title">device</text> -->
-    <card></card>
-    <card dev-obj="{{ dev }}"></card>
+    <div class="header">
+      <text>设备</text>
+      <image src="/assets/images/plus.svg" />
+    </div>
+    <list style="width: 80%">
+      <card></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+      <card dev-obj="{{ dev }}"></card>
+    </list>
   </div>
 </template>
 
 <script>
 export default {
   data: {
-    dev: { icon: "/assets/images/device-iphone.png", name: "备用机iPhone13" },
+    dev: { icon: "/assets/images/device-iphone.svg", name: "备用机iPhone13" },
   },
 
   onInit() { }
@@ -24,5 +39,17 @@ export default {
 .wrapper {
   .flex-box-mixins(column, flex-start, center);
   width: 100%;
+  padding-top: 84px;
+
+  .header {
+    margin-bottom: 24px;
+    width: 80%;
+    justify-content: space-between;
+
+    text {
+      font-size: 48px;
+      color: #000000;
+    }
+  }
 }
 </style>

quickapp/src/pages/Home/index.ux

@@ -23,28 +23,24 @@ export default {
         selectedIconPath: '/assets/images/tabbar-device-active.svg',
         active: true,
         compName: 'device',
-        title: '设备'
       },
       {
         iconPath: '/assets/images/tabbar-key.svg',
         selectedIconPath: '/assets/images/tabbar-key-active.svg',
         active: false,
         compName: 'key',
-        title: 'Key'
       },
       {
         iconPath: '/assets/images/tabbar-message.svg',
         selectedIconPath: '/assets/images/tabbar-message-active.svg',
         active: false,
         compName: 'message',
-        title: '消息'
       },
       {
         iconPath: '/assets/images/tabbar-settings.svg',
         selectedIconPath: '/assets/images/tabbar-settings-active.svg',
         active: false,
         compName: 'settings',
-        title: '设置'
       }
     ]
   },
@@ -58,10 +54,10 @@ export default {
   emitEvt({ detail: { idx: newIdx } } = evt) {
     // console.log('home', 'emitEvt', 'newIdx', newIdx)
     // console.log('home', 'emitEvt', 'tabbarData', this.tabbarData)
-    this.tabbarData[this.currentPageIndex].active = false;
-    this.tabbarData[newIdx].active = true;
+    // 解构交换变量
+    [this.tabbarData[this.currentPageIndex].active, this.tabbarData[newIdx].active]
+      = [this.tabbarData[newIdx].active, this.tabbarData[this.currentPageIndex].active]
     this.currentPageIndex = newIdx
-    this.$page.setTitleBar({ text: this.tabbarData[newIdx].title })
   },
 }
 </script>
@@ -72,15 +68,12 @@ export default {
   .flex-box-mixins(column, center, center);
 
   .stack {
-    /* width: 100%; */
     flex-grow: 1;
     align-items: flex-end;
 
     .deer-background {
-      /* position: fixed; */
       width: 100%;
       margin-bottom: 20px;
-      /* bottom: 200px; */
     }
   }
 }

quickapp/src/pages/Home/tabbar.ux

@@ -50,10 +50,10 @@ export default {
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      width: 60px;
     }
 
     image {
-      /* width: 58px; */
       height: 80px;
     }
 
@@ -61,17 +61,5 @@ export default {
       font-size: 30px;
     }
   }
-
-  /* .selected {
-    color: #0091ff;
-  }
-
-  .tab-recommend {
-    left: 0;
-  }
-
-  .tab-mine {
-    right: 0;
-  } */
 }
 </style>