test

src/App.vue

@@ -4,7 +4,6 @@
 
 <style lang="less">
 html, body, #app {
-    overflow: hidden;
     margin: 0;
     padding: 0;
     width: 100%;

src/pages/nft/add.vue

@@ -4,21 +4,85 @@
         <div class="content">
             <div class="l">
                 <div class="name">Preview</div>
-                <div class="show"></div>
+                <div class="show">
+                    <div class="card">
+                        <div class="absolute">
+                            <div class="logo"></div>
+                            <div class="member">LegalDAO Members</div>
+                            <div class="number">0001</div>
+                        </div>
+                        <img class="bg" src="" alt="" />
+                    </div>
+                </div>
+                <div class="list">
+                    <div class="item on"></div>
+                    <div class="item"></div>
+                    <div class="item"></div>
+                    <div class="item"></div>
+                </div>
             </div>
             <div class="r">
                 <div class="name">Card face</div>
+                <div class="face">
+                    <div class="off" v-if="false">
+                        <img src="../../static/img/icon-add-cover-off.svg" alt="" />
+                    </div>
+                    <div class="on" v-else>
+                        <img src="../../static/img/icon-add-cover-on.svg" alt="" />
+                        <img class="img" src="" alt="" />
+                    </div>
+                </div>
+                <div class="desc">Recommended size 500*500 or more</div>
                 <div class="name">Project Name</div>
+                <div class="input"><input type="text" /></div>
+
                 <div class="name">Project Description</div>
+                <div class="input"><input type="text" /></div>
+
                 <div class="name">Collection Size</div>
+                <div class="input"><input type="text" /></div>
+
                 <div class="name">NFTs Price</div>
+                <div class="price">
+                    <div class="currency">
+                        <img class="head" src="" alt="" />
+                        <div class="font">SHBI</div>
+                        <img class="arrow" src="../../static/img/icon-add-arrow.svg" alt="" />
+                    </div>
+                    <div class="input"><input type="text" /></div>
+                </div>
+
+                <div class="explain">
+                    <ul>
+                        <li>NFT will be released in blind box mode</li>
+                        <li>Users can buy 5 NFTs in one go, there will be a 20% discount</li>
+                        <li>Users need to pay service fees when transferring NFTs</li>
+                    </ul>
+                </div>
+                <div class="footer"></div>
             </div>
         </div>
+        <div class="create">
+            <button>Create</button>
+        </div>
     </div>
+
+    <div class="feedBack">
+        <div class="mail">
+            <img src="../../static/img/icon-feedback.svg" alt="" />
+        </div>
+        <div class="font">Feedback</div>
+    </div>
+
+    <div class="loading">
+        <img src="../../static/img/icon-add-loading.svg" alt="" />
+    </div>
+
 </template>
 
 <style lang="less" scoped>
 .center {
+    overflow-y: auto;
     padding: 0 50px;
     max-width: 1100px;
     margin: 10px auto 0;
@@ -44,15 +108,269 @@
         .l {
             width: 400px;
             .show {
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 height: 400px;
                 border-radius: 5px;
                 background: #F2F2F2;
                 border: 1px solid #F0F0F0;
+                .card {
+                    position: relative;
+                    overflow: hidden;
+                    width: 336px;
+                    height: 189px;
+                    border-radius: 12px;
+                    background: #353535;
+                    .absolute {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        text-align: center;
+                        .logo {
+                            margin: auto;
+                            width: 80px;
+                            height: 80px;
+                            margin-top: 20px;
+                            margin-bottom: 12px;
+                            border-radius: 50%;
+                            background-color: #225dab;
+                        }
+                        .member {
+                            color: #fff;
+                            font-size: 28px;
+                            font-weight: 800;
+                            line-height: 33px;
+                        }
+                        .number {
+                            margin-top: 4px;
+                            font-size: 24px;
+                            font-weight: 800;
+                            letter-spacing: 0.12px;
+                            color: rgba(255, 255, 255, .4);
+                        }
+                    }
+                    
+                    .bg {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+            .list {
+                margin-top: 20px;
+                display: flex;
+                .item {
+                    width: calc(100% / 4);
+                    height: 90px;
+                    cursor: pointer;
+                    margin-right: 13px;
+                    border-radius: 5px;
+                    background: #F2F2F2;
+                    border: 1px solid rgba(0, 0, 0, 0.1);
+                    &:last-child {
+                        margin: 0;
+                    }
+                    &.on {
+                        border: 1px solid rgba(0, 0, 0, 0.1);
+                        background-color: #D2D2D2;
+                        background-repeat: no-repeat;
+                        background-position: right top;
+                        background-image: url('../../static/img/icon-add-select.svg');
+                    }
+                }
             }
         }
         .r {
             width: 520px;
+            .face {
+                margin-bottom: 10px;
+                .off {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    width: 80px;
+                    height: 80px;
+                    border-radius: 100px;
+                    border: 1px dashed #D0D0D0;
+                    background: rgba(0, 0, 0, 0.02);
+                }
+                .on {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    width: 80px;
+                    height: 80px;
+                    overflow: hidden;
+                    border-radius: 100px;
+                    background: #353535;
+                    .img {
+                        position: absolute;
+                        opacity: .4;
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 100px;
+                    }
+                }
+            }
+            .desc {
+                color: #B4B4B4;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 16px;
+                margin-bottom: 22px;
+            }
+            .input {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 41px;
+                margin-bottom: 22px;
+                border-radius: 5px;
+                background: #FFFFFF;
+                border: 1px solid #E0E0E0;
+                input {
+                    border: 0;
+                    outline: none;
+                    padding: 3px 0;
+                    font-size: 16px;
+                    font-weight: 500;
+                    letter-spacing: 0.3px;
+                    width: calc(100% - 24px);
+                }
+            }
+            .price {
+                display: flex;
+                justify-content: space-between;
+                .currency {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: row;
+                    cursor: pointer;
+                    height: 43px;
+                    padding: 0 14px;
+                    margin-right: 13px;
+                    border-radius: 25px;
+                    background: #F4F4F4;
+                    .head {
+                        overflow: hidden;
+                        width: 20px;
+                        height: 20px;
+                        margin-right: 8px;
+                        border-radius: 50%;
+                        background-color: #999;
+                    }
+                    .font {
+                        max-width: 250px;
+                        font-size: 15px;
+                        font-weight: 500;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    .arrow {
+                        margin-left: 8px
+                    }
+                }
+                .input {
+                    flex: 1;
+                    margin-bottom: 0;
+                }
+            }
+            .explain {
+                color: #B4B4B4;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 18px;
+                ul {
+                    padding: 0;
+                    margin-left: 14px;
+                }
+            }
+            .footer {
+                height: 80px;
+            }
+        }
+    }
+    .create {
+        position: fixed;
+        left: 50%;
+        bottom: 0;
+        width: 1100px;
+        text-align: right;
+        padding: 15px 30px;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+        background-color: #fff;
+        border-top: solid 1px #ECECEC;
+        button {
+            border: 0;
+            height: 50px;
+            color: #FFFFFF;
+            cursor: pointer;
+            padding: 0 50px;
+            font-size: 18px;
+            font-weight: 700;
+            letter-spacing: 0.3px;
+            border-radius: 25px;
+            background: #1D9BF0;
         }
     }
 }
+
+.feedBack {
+    position: absolute;
+    right: 44px;
+    bottom: 88px;
+    cursor: pointer;
+    text-align: center;
+    .mail {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+        width: 50px;
+        height: 50px;
+        margin-bottom: 10px;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+    .font {
+        opacity: 0.7;
+        color: #A8A8A8;
+        letter-spacing: 0.3px;
+    }
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, .8);
+    img {
+        width: 100px;
+        animation: rotate 1s linear infinite;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 </style>

src/pages/nft/index.vue

@@ -18,6 +18,7 @@ onMounted(() => {
 
 <style lang="less">
 body {
+    overflow: hidden;
     background-color: #F5F5F5;
 }
 </style>

src/static/img/icon-add-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2266 4.34766L5.87388 9L1.5212 4.34766" stroke="#959595" stroke-width="1.5"/>
+</svg>

src/static/img/icon-add-cover-off.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.2666 8.56526H25.3999V10.3913C25.3999 10.8952 24.9818 11.3043 24.4667 11.3043C23.9514 11.3043 23.5333 10.8952 23.5333 10.3913V8.56526H21.6666C21.1514 8.56526 20.7334 8.15615 20.7334 7.65213C20.7334 7.14811 21.1514 6.73918 21.6666 6.73918H23.5333V4.91308C23.5333 4.40906 23.9514 4 24.4667 4C24.9818 4 25.3999 4.40906 25.3999 4.91308V6.73918H27.2666C27.7819 6.73918 28.2 7.14811 28.2 7.65213C28.2 8.15617 27.7819 8.56526 27.2666 8.56526ZM17.9333 8.56526H4.86666V21.2902C4.86854 21.2839 6.90971 12.3315 10.4079 12.3315C12.7122 12.3315 15.0558 19.2551 16.5166 21.3478C16.5166 21.3478 17.6617 16.8118 19.6376 16.7826C21.592 16.7542 22.6 21.2902 22.6 21.2902H23.5333V15.8696C23.5333 15.3656 23.9514 14.9565 24.4667 14.9565C24.9818 14.9565 25.3999 15.3656 25.3999 15.8696V23.1739C25.3999 24.1828 24.5638 25 23.5333 25H4.86666C3.83539 25 3 24.1828 3 23.1739V8.56526C3 7.55628 3.83539 6.73918 4.86666 6.73918H17.9333C18.4485 6.73918 18.8667 7.14811 18.8667 7.65213C18.8667 8.15617 18.4485 8.56526 17.9333 8.56526Z" fill="#939393"/>
+</svg>

src/static/img/icon-add-cover-on.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.2666 8.56526H25.3999V10.3913C25.3999 10.8952 24.9818 11.3043 24.4667 11.3043C23.9514 11.3043 23.5333 10.8952 23.5333 10.3913V8.56526H21.6666C21.1514 8.56526 20.7334 8.15615 20.7334 7.65213C20.7334 7.14811 21.1514 6.73918 21.6666 6.73918H23.5333V4.91308C23.5333 4.40906 23.9514 4 24.4667 4C24.9818 4 25.3999 4.40906 25.3999 4.91308V6.73918H27.2666C27.7819 6.73918 28.2 7.14811 28.2 7.65213C28.2 8.15617 27.7819 8.56526 27.2666 8.56526ZM17.9333 8.56526H4.86666V21.2902C4.86854 21.2839 6.90971 12.3315 10.4079 12.3315C12.7122 12.3315 15.0558 19.2551 16.5166 21.3478C16.5166 21.3478 17.6617 16.8118 19.6376 16.7826C21.592 16.7542 22.6 21.2902 22.6 21.2902H23.5333V15.8696C23.5333 15.3656 23.9514 14.9565 24.4667 14.9565C24.9818 14.9565 25.3999 15.3656 25.3999 15.8696V23.1739C25.3999 24.1828 24.5638 25 23.5333 25H4.86666C3.83539 25 3 24.1828 3 23.1739V8.56526C3 7.55628 3.83539 6.73918 4.86666 6.73918H17.9333C18.4485 6.73918 18.8667 7.14811 18.8667 7.65213C18.8667 8.15617 18.4485 8.56526 17.9333 8.56526Z" fill="white"/>
+</svg>

src/static/img/icon-add-loading.svg

@@ -0,0 +1,3 @@
+<svg width="116" height="116" viewBox="0 0 116 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95.4556 24.2344C113.933 44.7558 112.276 76.3706 91.7549 94.8482C71.2335 113.326 39.6187 111.669 21.1411 91.1474C2.66359 70.6261 4.32046 39.0112 24.8418 20.5337C34.2653 12.0487 46.0281 7.80946 57.7838 7.69296" stroke="#1D9BF0" stroke-width="15"/>
+</svg>

src/static/img/icon-add-select.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H30V30L0 0Z" fill="#1D9BF0"/>
+<path d="M15.3984 9.79688L19.1143 13.7604L25.3074 5.83331" stroke="white" stroke-width="1.875"/>
+</svg>

src/static/img/icon-feedback.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.8333 6H4.16667C2.86667 6 2 6.9 2 8.25V21.75C2 22.875 2.86667 24 4.16667 24H25.8333C26.9167 24 28 23.1 28 21.75V8.25C28 6.9 27.1333 6 25.8333 6ZM23.6667 8.25L15 13.65L6.33333 8.25H23.6667ZM4.16667 21.75V9.6L14.5667 16.125C14.7833 16.125 15 16.35 15.2167 16.35C15.4333 16.35 15.65 16.35 15.8667 16.125L25.8333 9.6V21.75H4.16667Z" fill="#C0C0C0"/>
+</svg>