96 lines
1.8 KiB
Vue
96 lines
1.8 KiB
Vue
<template>
|
|
<div class="Container">
|
|
<div class="icon" @click="openWeiXinModel">
|
|
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="" />
|
|
<span>{{ displayText }}</span>
|
|
</div>
|
|
<weiXinModel ref="weiXinModel"></weiXinModel>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
defineComponent,
|
|
ref,
|
|
reactive,
|
|
watch,
|
|
onMounted,
|
|
nextTick,
|
|
toRefs,
|
|
} from "vue";
|
|
import weiXinModel from "./weiXinModel.vue";
|
|
import { useI18n } from 'vue-i18n'
|
|
export default defineComponent({
|
|
name: "login",
|
|
components: {
|
|
weiXinModel,
|
|
},
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
setup(props) {
|
|
let weiXinDom = reactive({
|
|
weiXinModel: null,
|
|
});
|
|
const { t } = useI18n()
|
|
const openWeiXinModel = () => {
|
|
weiXinDom.weiXinModel.init();
|
|
};
|
|
const displayText = computed(() => {
|
|
return props.text || t('Login.LoginWithWechat')
|
|
})
|
|
onMounted(() => {});
|
|
return {
|
|
...toRefs(weiXinDom),
|
|
openWeiXinModel,
|
|
displayText,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.Container {
|
|
position: relative;
|
|
.icon {
|
|
// width: 40px;
|
|
width: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4rem;
|
|
padding: 1.3rem 4.6rem;
|
|
// padding: 0.5rem 3rem;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
background-color: #F9FAFA;
|
|
@media (max-width: 768px) {
|
|
border-radius: 2.5rem;
|
|
padding: .32rem 1.7rem;
|
|
}
|
|
&:hover {
|
|
background: #f8faff;
|
|
}
|
|
img {
|
|
width: 3.8rem;
|
|
height: 3.8rem;
|
|
@media (max-width: 768px) {
|
|
width: 2.7rem;
|
|
height: 2.7rem;
|
|
}
|
|
}
|
|
span {
|
|
font-size: 1.4rem;
|
|
margin-left: 1.4rem;
|
|
@media (max-width: 768px) {
|
|
font-size: 1.2rem;
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
}
|
|
&.Container:hover {
|
|
}
|
|
}
|
|
</style>
|