style

uni-arts-chain · Aug 19, 2021 · a5b0194 · a5b0194
1 parent 3a0cac0
commit a5b0194
Show file tree

Hide file tree

Showing 49 changed files with 1,674 additions and 397 deletions.
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
@@ -37,6 +37,17 @@ body{
     height: 100%;
 }
 
+.mobile{
+    @media screen and (min-width: 970px) {
+        display: none;
+    }
+}
+.pc{
+    @media screen and (max-width: 970px) {
+        display: none;
+    }
+}
+
 .container {
     @media screen and (max-width: 970px) {
         width: 100%;

diff --git a/src/components/AdaptiveImage.vue b/src/components/AdaptiveImage.vue
@@ -99,12 +99,14 @@ export default {
     border-radius: 4px;
     position: relative;
     > img {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translateY(-50%) translateX(-50%);
-        transition: opacity 0.3s ease;
-        opacity: 1;
+        @media screen and (min-width: 970px) {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translateY(-50%) translateX(-50%);
+            transition: opacity 0.3s ease;
+            opacity: 1;
+        }
     }
 
     > img.img-horizontal {
@@ -115,9 +117,19 @@ export default {
     > img.img-vertical {
         height: 100%;
         width: auto;
+        @media screen and (max-width: 970px) {
+            width: 100%;
+            height: auto;
+        }
     }
 
     > img.img-origin {
+        @media screen and (max-width: 970px) {
+            width: 100%;
+            max-height: unset;
+            max-width: unset;
+            height: 100%;
+        }
         max-height: 100%;
         max-width: 100%;
     }

diff --git a/src/components/ArtistGroupList.vue b/src/components/ArtistGroupList.vue
@@ -43,9 +43,15 @@ export default {
     justify-content: space-between;
 }
 .card {
+    @media screen and (max-width: 970px) {
+        width: 40%;
+        margin: 0 5%;
+        border: 2px solid black;
+        border-radius: 8px;
+    }
     width: 30%;
     height: 364px;
-    box-shadow: 0px 0px 30px 0px #ddd;
+    box-shadow: 0 0 30px 0 #ddd;
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/src/components/Dialog/Dialog.vue b/src/components/Dialog/Dialog.vue
@@ -102,6 +102,9 @@ export default {
         background: #ffffff;
         box-shadow: 0px 5px 31px 0px rgba(135, 135, 135, 0.73);
         padding: 10px 100px 66px;
+        @media screen and (max-width: 970px) {
+            padding: 10px;
+        }
     }
     ::v-deep .el-dialog .el-dialog__header {
         padding: 0;

diff --git a/src/components/Input.vue b/src/components/Input.vue
@@ -88,6 +88,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 input {
+    @media screen and (max-width: 970px) {
+        min-height: unset;
+    }
     min-height: 45px;
     height: 100%;
     border: 2px solid #020202;

diff --git a/src/components/Thumbnail.vue b/src/components/Thumbnail.vue
@@ -51,6 +51,9 @@ export default {
 }
 .thumbnail.group {
     .item {
+        @media screen and (max-width: 970px) {
+            margin-bottom: 40px;
+        }
         margin-bottom: 115px;
     }
 }

diff --git a/src/components/ThumbnailImgView.vue b/src/components/ThumbnailImgView.vue
@@ -36,10 +36,11 @@
             <span class="address">{{ item.item_hash }}</span>
         </div>
         <div class="price" v-if="!isAuction">
-            {{ item.price }} {{ item.currency_code.toUpperCase() }}
+            <span>{{ item.price }}</span> {{ item.currency_code.toUpperCase() }}
         </div>
         <div class="price" v-else>
-            Starting at {{ item.price }} {{ item.currency_code.toUpperCase() }}
+            Starting at <span>{{ item.price }}</span>
+            {{ item.currency_code.toUpperCase() }}
         </div>
     </div>
 </template>
@@ -105,6 +106,9 @@ export default {
 }
 .thumbnail.group {
     .item {
+        @media screen and (max-width: 970px) {
+            margin-bottom: 40px;
+        }
         margin-bottom: 115px;
     }
 }
@@ -118,6 +122,10 @@ export default {
 }
 
 .img-container {
+    @media screen and (max-width: 970px) {
+        margin-bottom: 10px;
+        height: unset;
+    }
     display: block;
     width: 100%;
     height: 270px;
@@ -135,6 +143,12 @@ export default {
         background-color: rgba(134, 29, 57, 0.8);
     }
     .aution-label {
+        @media screen and (max-width: 970px) {
+            top: 10px !important;
+            left: 0 !important;
+            padding: 3px;
+            line-height: unset;
+        }
         line-height: 35px;
         position: absolute;
         top: 15px;
@@ -183,6 +197,10 @@ export default {
 }
 
 .title {
+    @media screen and (max-width: 970px) {
+        font-size: 20px;
+        line-height: 20px;
+    }
     text-transform: uppercase;
     font-size: 22px;
     font-weight: 600;
@@ -191,6 +209,12 @@ export default {
 }
 .desc,
 .address-label {
+    @media screen and (max-width: 970px) {
+        margin-top: 10px;
+        font-size: 16px;
+        line-height: 16px;
+        min-height: unset;
+    }
     font-size: 18px;
     font-weight: 400;
     text-align: left;
@@ -200,13 +224,25 @@ export default {
 }
 
 .address-label {
+    @media screen and (max-width: 970px) {
+        font-size: 16px;
+        line-height: 16px;
+        min-height: unset;
+    }
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-height: 35px;
 }
 
 .price {
+    span {
+        color: red;
+    }
+    @media screen and (max-width: 970px) {
+        font-size: 20px;
+        line-height: 20px;
+    }
     font-size: 22px;
     font-weight: 600;
     text-align: left;

diff --git a/src/components/Upload.vue b/src/components/Upload.vue
@@ -100,8 +100,9 @@ export default {
     width: 360px;
     .box-boder {
         @media screen and (max-width: 970px) {
-            padding-bottom: 50%;
-            margin-bottom: -40%;
+            height: 200px;
+            width: 200px;
+            margin-right: unset;
         }
         width: 360px;
         max-width: 100%;

diff --git a/src/plugins/element.js b/src/plugins/element.js
@@ -6,6 +6,7 @@ import {
     Tabs,
     TabPane,
     Radio,
+    Drawer,
 } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
@@ -22,5 +23,6 @@ export default {
         vue.use(Radio);
         vue.use(Tabs);
         vue.use(TabPane);
+        vue.use(Drawer);
     },
 };
diff --git a/src/views/Account/Collection.vue b/src/views/Account/Collection.vue
@@ -1,12 +1,14 @@
 /** * Created by Lay Hunt on 2021-01-29 17:13:31. */
 <template>
     <div class="collection container">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/account' }"
-                >Profile</el-breadcrumb-item
-            >
-            <el-breadcrumb-item>Collection</el-breadcrumb-item>
-        </el-breadcrumb>
+        <div class="pc">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item :to="{ path: '/account' }"
+                    >Profile</el-breadcrumb-item
+                >
+                <el-breadcrumb-item>Collection</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
         <div class="title">Collection</div>
         <Thumbnail v-loading="isLoading" :list="list" />
         <div class="pagenation" v-if="hasPrev || hasNext">
@@ -97,14 +99,14 @@ export default {
     text-align: left;
     > .title {
         @media screen and (max-width: 970px) {
-            font-size: 20px;
-            margin-bottom: 30px;
-            margin-top: 20px;
+            font-size: 24px;
+            margin-bottom: 10px;
+            margin-top: 10px;
         }
         font-family: "Broadway";
         font-size: 38px;
         font-weight: 400;
-        text-align: left;
+        text-align: center;
         color: #020202;
         letter-spacing: 2px;
         text-transform: uppercase;

diff --git a/src/views/Account/Followers.vue b/src/views/Account/Followers.vue
@@ -1,12 +1,14 @@
 /** * Created by Lay Hunt on 2021-01-29 17:13:31. */
 <template>
     <div class="followers container">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/account' }"
-                >Profile</el-breadcrumb-item
-            >
-            <el-breadcrumb-item>Followers</el-breadcrumb-item>
-        </el-breadcrumb>
+        <div class="pc">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item :to="{ path: '/account' }"
+                    >Profile</el-breadcrumb-item
+                >
+                <el-breadcrumb-item>Followers</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
         <div class="title">Followers</div>
         <div class="list" v-loading="isLoading">
             <div class="no-data" v-if="list.length == 0">No Artwork</div>
@@ -162,14 +164,14 @@ export default {
     text-align: left;
     > .title {
         @media screen and (max-width: 970px) {
-            font-size: 20px;
+            font-size: 24px;
             margin-bottom: 30px;
             margin-top: 20px;
         }
         font-family: "Broadway";
         font-size: 38px;
         font-weight: 400;
-        text-align: left;
+        text-align: center;
         color: #020202;
         letter-spacing: 2px;
         text-transform: uppercase;

diff --git a/src/views/Account/Following.vue b/src/views/Account/Following.vue
@@ -1,12 +1,14 @@
 /** * Created by Lay Hunt on 2021-01-29 17:13:31. */
 <template>
     <div class="following container">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item :to="{ path: '/account' }"
-                >Profile</el-breadcrumb-item
-            >
-            <el-breadcrumb-item>Following</el-breadcrumb-item>
-        </el-breadcrumb>
+        <div class="pc">
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item :to="{ path: '/account' }"
+                    >Profile</el-breadcrumb-item
+                >
+                <el-breadcrumb-item>Following</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
         <div class="title">Following</div>
         <div class="list" v-loading="isLoading">
             <div class="no-data" v-if="list.length == 0">No Artwork</div>
@@ -162,14 +164,14 @@ export default {
     text-align: left;
     > .title {
         @media screen and (max-width: 970px) {
-            font-size: 20px;
-            margin-bottom: 30px;
-            margin-top: 20px;
+            font-size: 24px;
+            margin-bottom: 10px;
+            margin-top: 10px;
         }
         font-family: "Broadway";
         font-size: 38px;
         font-weight: 400;
-        text-align: left;
+        text-align: center;
         color: #020202;
         letter-spacing: 2px;
         text-transform: uppercase;