[add]give dialog style

package.json

@@ -12,8 +12,10 @@
     "@paypal/paypal-js": "^5.0.2",
     "core-js": "^3.8.3",
     "element-plus": "^2.1.4",
+    "node-sass": "^7.0.1",
     "postcss-import": "^14.0.2",
     "postcss-url": "^10.1.3",
+    "sass-loader": "^12.6.0",
     "vue": "^3.2.13"
   },
   "devDependencies": {

src/entry/content.js

@@ -4,7 +4,7 @@ const shadowRoot = deBtn.attachShadow({mode: 'closed'})
 const shadowDiv = document.createElement('div');
 shadowDiv.innerText = 'Test Btn';
 shadowDiv.id = 'de-btn';
-shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background-color: rgb(29, 155, 240);color:#fff;font-size:15px;font-weight:700;border-radius:30px';
+shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px';
 shadowRoot.appendChild(shadowDiv);
 let tweetBtn;
 

src/view/components/give-dialog.vue

@@ -1,23 +1,116 @@
 <template>
-  <el-dialog
+  <div class="overlay" v-if="visible">
+    <div class="content">
+      <div class="head">
+
+      </div>
+      <div class="body">
+        <div class="left"></div>
+        <div class="right">
+          <div class="form-wrapper">
+            <div class="form-base">
+              <div class="item">
+                <div class="label">
+                  USD
+                </div>
+                <el-input v-model="baseFormData.amount"
+                          placeholder="Please input"
+                          :input-style="{'box-shadow': 'none'}" />
+              </div>
+              <div class="item">
+                <div class="label">
+                  Quantity
+                </div>
+                <el-input v-model="baseFormData.quantity"
+                          placeholder="Please input"
+                          :input-style="{'box-shadow': 'none'}" />
+              </div>
+            </div>
+            <div class="form-require">
+              <div class="bar">
+                <div class="label">
+                  Require
+                </div>
+                <el-dropdown trigger="click">
+                  <div class="button">＋</div>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item
+                        v-for="(item, index) in optionsList"
+                        :key="index"
+                        @click="addOption(item)">
+                        {{item.type}}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+              <div class="form-item"
+                   v-for="(item, index) in formList"
+                   :key="index">
+                <div class="label">
+                  {{item.type}}
+                </div>
+                <div class="control">
+                  <el-input v-model="formData[item.type]"
+                            placeholder="Please input"
+                            :input-style="{'box-shadow': 'none'}"
+                            v-if="item.type == 'Follow'"/>
+                  <div class="inner"
+                       v-else
+                       @click="selectChange(item)">
+                    {{formData[item.type]?'✅':'❌'}}
+                  </div>
+                </div>
+                <div class="btn" @click="removeOption(item, index)">
+                  ×
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="submit-btn">
+            NEXT
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<!--  <el-dialog
     v-model="visible"
     title="give Dialog"
     width="30%"
     @close="close">
-    <span></span>
-    <template #footer>
-      <span class="dialog-footer">
-<!--    <el-button @click="close">Cancel</el-button>-->
-        <el-button type="primary" @click="confirm">next</el-button>
-      </span>
-    </template>
-  </el-dialog>
+  </el-dialog>-->
 </template>
 
 <script setup>
 /* eslint-disable */
-  import {ref, watch} from "vue";
-  let visible = ref(false);
+  import {ref, watch, reactive} from "vue";
+  let visible = ref(true);
+
+  let baseFormData = reactive({
+		amount: '',
+		quantity: '',
+	});
+
+  let formData = reactive({
+		Follow: '',
+		Like: false,
+		Retweet: false
+  });
+
+  let optionsList = reactive([
+    {type: 'Follow'},
+    {type: 'Like'},
+    {type: 'Retweet'},
+  ]);
+
+  let formList = reactive([
+		{type: 'Follow'},
+		{type: 'Like'},
+		{type: 'Retweet'},
+	]);
 
   const props = defineProps({
 		dialogVisible: {
@@ -43,8 +136,171 @@
 	const confirm = () => {
 		emits('confirm', false)
 	}
+
+	const addOption = (params) => {
+		let hasItem = formList.find(item => item.type == params.type);
+		if (!formList.length || !hasItem) {
+			formList.push(params)
+		}
+	}
+
+	const removeOption = (params, index) => {
+		formList.splice(index, 1);
+  }
+
+	const selectChange = (params, index) => {
+		formData[params.type] = !formData[params.type];
+  }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2000;
+    height: 100%;
+    background-color: rgba(0,0,0,.5);
+    overflow: auto;
+
+    .content {
+      width: 43%;
+      height: 500px;
+      background: #FFFFFF;
+      border-radius: 16px;
+      position: absolute;
+      left: 50%;
+      top: 10%;
+      transform: translate(-50%, 0);
+      box-sizing: border-box;
+
+      .head {
+        border-bottom: 1px solid #ECECEC;
+        height: 48px;
+        box-sizing: border-box;
+      }
+      .body {
+        box-sizing: border-box;
+        height: calc(100% - 48px);
+        display: flex;
+        .left,.right {
+          height: 100%;
+        }
+        .left {
+          width: 50px;
+        }
+        .right {
+          width: calc(100% - 50px);
+          padding: 26px 18px;
+          box-sizing: border-box;
+          position: relative;
+          border-left: 1px solid #ECECEC;
+
+          .form-wrapper {
+            .form-base {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              .item {
+                width: 250px;
+                height: 60px;
+                border: 1px solid #E1E1E1;
+                box-sizing: border-box;
+                border-radius: 15px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 18px 16px;
+
+                .label {
+                  font-weight: 500;
+                  font-size: 15px;
+
+                  .img {
+                    width: 20px;
+                    height: 20px;
+                  }
+                }
+              }
+            }
+
+            .form-require {
+              border: 1px solid #E1E1E1;
+              box-sizing: border-box;
+              border-radius: 15px;
+              margin-top: 12px;
+
+              .bar {
+                padding: 2px 10px 0 10px;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                line-height: 50px;
+
+                .button {
+                  width: 22px;
+                  height: 22px;
+                  background: #4A99E9;
+                  border-radius: 5px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: #fff;
+                  cursor: pointer;
+                }
+              }
+
+              .form-item {
+                height: 50px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin: 0 16px;
+                border-bottom: 1px solid #ECECEC;
+                .label {
+                  width: 100px;
+                  color: rgba(0,0,0,.6);
+                }
+                .control {
+                  width: 264px;
+                  height: 50px;
+                  line-height: 50px;
+                  cursor: pointer;
+
+                  .inner {
+                    width: 100%;
+                    height: 100%;
+                    box-sizing: border-box;
+                    padding-left: 10px;
+                  }
+                }
+                .btn {
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+
+          .submit-btn {
+            width: calc(100% - 36px);
+            height: 60px;
+            text-align: center;
+            line-height: 60px;
+            background: #4A99E9;
+            border-radius: 15px;
+            color: #fff;
+            position: absolute;
+            bottom: 32px;
+            left: 18px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
 
 </style>