aida_front/src/component/LoginPage/weiXinLogin.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>