Browse Source

style: del resetcss site mobile demo

richard1015 4 years ago
parent
commit
6a61b8df42

+ 4 - 1
src/packages/__VUE/address/index.scss

@@ -66,7 +66,8 @@
         padding-top: 15px;
         height: 270px;
         overflow-y: auto;
-
+        box-sizing: border-box;
+        padding: 0;
         .region-item {
           display: flex;
           align-items: center;
@@ -100,6 +101,8 @@
       overflow-y: scroll;
 
       .exist-ul {
+        box-sizing: border-box;
+        padding: 0;
         .exist-item {
           display: flex;
           align-items: center;

+ 2 - 5
src/packages/__VUE/barrage/index.scss

@@ -5,6 +5,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  box-sizing: border-box;
   background-color: #f7f8fa;
   .dmitem {
     display: block;
@@ -16,11 +17,7 @@
     text-align: center;
     white-space: pre;
     transform: translateX(100%);
-    background: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.15),
-      rgba(0, 0, 0, 0)
-    );
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
     &.move {
       will-change: transform;
       animation-name: moving;

+ 1 - 1
src/packages/__VUE/button/index.scss

@@ -11,7 +11,7 @@
   text-align: center;
   cursor: pointer;
   transition: opacity 0.2s;
-  -webkit-appearance: none;
+  appearance: none;
   user-select: none;
   touch-action: manipulation;
   .text {

+ 1 - 1
src/packages/__VUE/cell/index.scss

@@ -14,7 +14,7 @@
 
   &:last-child {
     &::after {
-      border: 0;
+      border: 0 !important;
     }
   }
 

+ 1 - 0
src/packages/__VUE/icon/demo.vue

@@ -62,6 +62,7 @@ export default createDemo({
 ul {
   display: flex;
   flex-wrap: wrap;
+  padding: 0;
   li {
     flex: 0 0 25%;
     max-width: 25%;

+ 5 - 24
src/packages/__VUE/infiniteloading/demo.vue

@@ -3,18 +3,8 @@
     <h2>基础用法</h2>
     <nut-cell>
       <ul class="infiniteUl" id="scroll">
-        <nut-infiniteloading
-          container-id="scroll"
-          :use-window="false"
-          :has-more="hasMore"
-          @load-more="loadMore"
-        >
-          <li
-            class="infiniteLi"
-            v-for="(item, index) in defultList"
-            :key="index"
-            >{{ item }}</li
-          >
+        <nut-infiniteloading container-id="scroll" :use-window="false" :has-more="hasMore" @load-more="loadMore">
+          <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
         </nut-infiniteloading>
       </ul>
     </nut-cell>
@@ -31,12 +21,7 @@
           @load-more="refreshLoadMore"
           @refresh="refresh"
         >
-          <li
-            class="infiniteLi"
-            v-for="(item, index) in refreshList"
-            :key="index"
-            >{{ item }}</li
-          >
+          <li class="infiniteLi" v-for="(item, index) in refreshList" :key="index">{{ item }}</li>
         </nut-infiniteloading>
       </ul>
     </nut-cell>
@@ -52,12 +37,7 @@
           :has-more="customHasMore"
           @load-more="customLoadMore"
         >
-          <li
-            class="infiniteLi"
-            v-for="(item, index) in customList"
-            :key="index"
-            >{{ item }}</li
-          >
+          <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
         </nut-infiniteloading>
       </ul>
     </nut-cell>
@@ -155,6 +135,7 @@ export default createDemo({
 .infiniteUl {
   height: 300px;
   width: 100%;
+  padding: 0;
   overflow-y: auto;
   overflow-x: hidden;
 }

+ 7 - 0
src/packages/__VUE/shortpassword/index.scss

@@ -34,6 +34,9 @@
     right: 247px;
     width: 247px;
     height: 41px;
+    outline: 0 none;
+    border: 0;
+    text-decoration: none;
   }
 }
 .nut-input-normalw {
@@ -52,6 +55,9 @@
     right: 0;
     width: 247px;
     height: 41px;
+    outline: 0 none;
+    border: 0;
+    text-decoration: none;
     // opacity: 0; // 安卓必需
     // z-index: 11; // 安卓必需
   }
@@ -79,6 +85,7 @@
   width: 100%;
   height: 41px;
   margin: 0 auto;
+  box-sizing: border-box;
   background: $shortpsd-background-color;
   border-radius: 4px;
   border: 1px solid $shortpsd-border-color;

+ 4 - 0
src/packages/styles/mixins/index.scss

@@ -1,2 +1,6 @@
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
 @import 'make-animation.scss';
 @import 'text-ellipsis.scss';

+ 12 - 7
src/sites/mobile/App.vue

@@ -26,9 +26,7 @@ export default defineComponent({
 
     // 是否显示 title
     const isShow = computed(() => {
-      return (
-        title.value && title.value != '/' && !title.value.includes('-taro')
-      );
+      return title.value && title.value != '/' && !title.value.includes('-taro');
     });
     // 当当前路由发生变化时,调用回调函数
     watch(
@@ -38,11 +36,9 @@ export default defineComponent({
         const { hash } = window.top.location;
         if (!isMobile && route.hash != hash) {
           // window.top.location.replace(`${origin}${pathname}#/${route.hash}`);
-          title.value =
-            (route?.meta?.ComponentName as string) || (route.name as string);
+          title.value = (route?.meta?.ComponentName as string) || (route.name as string);
         } else {
-          title.value =
-            (route?.meta?.ComponentName as string) || (route.name as string);
+          title.value = (route?.meta?.ComponentName as string) || (route.name as string);
         }
       },
       {
@@ -57,6 +53,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+html,
+body {
+  height: 100%;
+  width: 100%;
+  background: #fff;
+  margin: 0;
+  padding: 0;
+}
+
 #app {
   background: #fff;
   height: 100%;

+ 3 - 3
src/sites/mobile/components/Index.vue

@@ -14,9 +14,7 @@
           <template v-for="_package in _nav.packages" :key="_package">
             <li v-if="_package.show">
               <router-link :to="_package.name.toLowerCase()"
-                >{{ _package.name }}&nbsp;&nbsp;{{
-                  _package.cName
-                }}</router-link
+                >{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}</router-link
               >
               <nut-icon size="14px" color="#979797" name="right"></nut-icon>
             </li>
@@ -41,6 +39,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
+@import '@/sites/assets/styles/reset.scss';
 .index {
   height: 100%;
   width: 100%;
@@ -75,6 +74,7 @@ export default defineComponent({
     }
   }
   &-components {
+    box-sizing: border-box;
     background: #f7f8fa;
     border-radius: 30px 30px 0 0;
     overflow: hidden;

+ 1 - 0
src/sites/mobile/components/IndexTaro.vue

@@ -26,6 +26,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
+@import '@/sites/assets/styles/reset.scss';
 .index {
   height: 100%;
   width: 100%;

+ 1 - 5
src/sites/mobile/main.ts

@@ -2,9 +2,5 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import NutUI from '@/packages/nutui.vue';
-import '@/sites/assets/styles/reset.scss';
 import '@/packages/utils/touchEmulator';
-createApp(App)
-  .use(router)
-  .use(NutUI)
-  .mount('#app');
+createApp(App).use(router).use(NutUI).mount('#app');