|
@@ -1,12 +1,20 @@
|
|
<template>
|
|
<template>
|
|
- <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading, 'disabled': disabled }">
|
|
|
|
- <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading && icon" />
|
|
|
|
- <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-if="!loading && icon" />
|
|
|
|
- <span :style="{ 'font-size': fontSize, 'color': txtCorlor }">{{ txt }}</span>
|
|
|
|
|
|
+ <div :class="{ 'area-btn': disabled }">
|
|
|
|
+ <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading, 'disabled': disabled }">
|
|
|
|
+ <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading && icon" />
|
|
|
|
+ <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-if="!loading && icon" />
|
|
|
|
+ <span :style="{ 'font-size': fontSize, 'color': txtCorlor, 'font-weight': fontWeight }">{{ txt }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="refresh" v-if="disabled">
|
|
|
|
+ <img :src="require('@/assets/svg/icon-refresh-treasure.svg')"
|
|
|
|
+ :class="{ 'icon-refresh-rotate': refreshRotate }" alt="" @click="refresh" />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
<script setup>
|
|
-import { defineProps, defineEmits } from 'vue'
|
|
|
|
|
|
+import { inject, defineProps, defineEmits, ref } from 'vue'
|
|
|
|
+let refreshRotate = ref(false);
|
|
|
|
+let state = inject('state')
|
|
defineProps({
|
|
defineProps({
|
|
txt: {
|
|
txt: {
|
|
type: String,
|
|
type: String,
|
|
@@ -20,6 +28,10 @@ defineProps({
|
|
type: String,
|
|
type: String,
|
|
default: '20px'
|
|
default: '20px'
|
|
},
|
|
},
|
|
|
|
+ fontWeight: {
|
|
|
|
+ type: String,
|
|
|
|
+ default: '800'
|
|
|
|
+ },
|
|
icon: {
|
|
icon: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
default: true
|
|
default: true
|
|
@@ -33,64 +45,103 @@ defineProps({
|
|
}
|
|
}
|
|
})
|
|
})
|
|
const emit = defineEmits(['on-click'])
|
|
const emit = defineEmits(['on-click'])
|
|
|
|
+
|
|
const clickBtn = () => {
|
|
const clickBtn = () => {
|
|
emit('on-click')
|
|
emit('on-click')
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+const refresh = () => {
|
|
|
|
+ if (!refreshRotate.value) {
|
|
|
|
+ refreshRotate.value = true;
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ refreshRotate.value = false;
|
|
|
|
+ }, 1000)
|
|
|
|
+
|
|
|
|
+ state.init(() => {
|
|
|
|
+ state.inviteInit()
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
-.btn-submit {
|
|
|
|
- background: #1D9BF0;
|
|
|
|
- border-radius: 100px;
|
|
|
|
|
|
+.area-btn {
|
|
display: flex;
|
|
display: flex;
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- height: 53px;
|
|
|
|
- width: 343px;
|
|
|
|
- margin: 0 auto;
|
|
|
|
- cursor: pointer;
|
|
|
|
- user-select: none;
|
|
|
|
-
|
|
|
|
- span {
|
|
|
|
- font-weight: 800;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
- font-size: 20px;
|
|
|
|
- line-height: 24px;
|
|
|
|
- margin-left: 6px;
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ .btn-submit {
|
|
|
|
+ background: #1D9BF0;
|
|
|
|
+ border-radius: 100px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 53px;
|
|
|
|
+ width: 343px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ user-select: none;
|
|
|
|
|
|
- img {
|
|
|
|
- width: 20px;
|
|
|
|
- height: 20px;
|
|
|
|
- }
|
|
|
|
|
|
+ span {
|
|
|
|
+ font-weight: 800;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ margin-left: 6px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ img {
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
- .loading {
|
|
|
|
- animation: loading 1s infinite linear;
|
|
|
|
|
|
+
|
|
|
|
+ .loading {
|
|
|
|
+ animation: loading 1s infinite linear;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
|
|
-.no {
|
|
|
|
- cursor: no-drop;
|
|
|
|
-}
|
|
|
|
|
|
+ .refresh {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
-.disabled {
|
|
|
|
- cursor: no-drop;
|
|
|
|
- background: #F1F1F1;
|
|
|
|
|
|
+ img {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
|
- color: #AFAFAF;
|
|
|
|
|
|
+ .icon-refresh-rotate {
|
|
|
|
+ transform: rotate(360deg);
|
|
|
|
+ transition-duration: 1s;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
|
|
-@keyframes loading {
|
|
|
|
- from {
|
|
|
|
- transform: rotate(0deg);
|
|
|
|
|
|
+ .no {
|
|
|
|
+ cursor: no-drop;
|
|
}
|
|
}
|
|
|
|
|
|
- to {
|
|
|
|
- transform: rotate(360deg);
|
|
|
|
|
|
+ .disabled {
|
|
|
|
+ cursor: no-drop;
|
|
|
|
+ background: #F1F1F1;
|
|
|
|
+ width: 305px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ margin: 0;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ color: #AFAFAF;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes loading {
|
|
|
|
+ from {
|
|
|
|
+ transform: rotate(0deg);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ to {
|
|
|
|
+ transform: rotate(360deg);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|