|
@@ -0,0 +1,122 @@
|
|
|
+<template>
|
|
|
+ <view v-show="show1">
|
|
|
+ <view class="QuickRegistration">
|
|
|
+ <view class="view1">
|
|
|
+ <image class="quick1" src="@/assets/img/quick/1.png"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="view2">
|
|
|
+
|
|
|
+ <view class="view3">
|
|
|
+ <image class="quick4" @click="close"
|
|
|
+ src="@/assets/img/quick/4.png"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="view4">
|
|
|
+
|
|
|
+ <image class="quick2" src="@/assets/img/quick/2.png"></image>
|
|
|
+
|
|
|
+ <view class="viewbtn">
|
|
|
+
|
|
|
+ <image class="quick3" src="@/assets/img/quick/3.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name:"QuickRegistration",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show1:true,
|
|
|
+ show2:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ open(){
|
|
|
+
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ // 标记关闭是内部发生的,否则修改了value值,导致watch中对value检测,导致再执行一遍close
|
|
|
+ // 造成@close事件触发两次
|
|
|
+ this.show1=false
|
|
|
+ this.$emit("close");
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .QuickRegistration{
|
|
|
+ position: fixed;
|
|
|
+ bottom: 80rpx;
|
|
|
+ z-index: 1000;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .quick1{
|
|
|
+ width: 240rpx;
|
|
|
+ height: 190rpx;
|
|
|
+ position: relative;
|
|
|
+ bottom: -100rpx;
|
|
|
+ }
|
|
|
+ .quick2{
|
|
|
+
|
|
|
+ width: 500rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+ }
|
|
|
+ .quick3{
|
|
|
+ width: 176rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ .quick4{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ position: fixed;
|
|
|
+ right: 70rpx;
|
|
|
+ }
|
|
|
+ .view4{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .view3{
|
|
|
+
|
|
|
+ }
|
|
|
+ .view1{
|
|
|
+
|
|
|
+ }
|
|
|
+ .view2{
|
|
|
+ background: linear-gradient(180deg, rgba(79,205,145,1) 0%,rgba(30,159,84,1) 100%);
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(34, 125, 63, 0.5);
|
|
|
+ border: 1px solid rgba(79, 205, 145, 1);
|
|
|
+ border-radius: 12px;
|
|
|
+ width: 670rpx;
|
|
|
+ height: 320rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24rpx 0 40rpx 0;
|
|
|
+ }
|
|
|
+ .viewbtn{
|
|
|
+ width: 448rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: linear-gradient(180deg, rgba(255,228,0,1) 0%,rgba(255,188,0,1) 100%);
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|