79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
|
<div class="QRcode-box apartment-QRcode flexflex">
|
|
<img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png" />
|
|
<div class="QRcode-case flexcenter">
|
|
<img class="QRcode-img" :src="props['qrcode']" alt="" />
|
|
</div>
|
|
<div class="apartment-QRcode-hint flexacenter">
|
|
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png" />
|
|
手机查看该{{ props["type"] == "apartment" ? "公寓" : "房源" }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from "vue"
|
|
|
|
const props = defineProps({
|
|
qrcode: String,
|
|
type: String,
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.QRcode-box {
|
|
width: 304px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: 1px solid rgba(235, 235, 235, 1);
|
|
border-radius: 16px;
|
|
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
|
|
.scan-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
&.apartment-QRcode {
|
|
padding: 40px 0;
|
|
|
|
&.apartment-box {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mini-program-title {
|
|
width: 168px;
|
|
height: 20px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.QRcode-case {
|
|
width: 140px;
|
|
height: 140px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
|
margin-bottom: 33px;
|
|
|
|
.QRcode-img {
|
|
width: 120px;
|
|
// height: 110px;
|
|
}
|
|
}
|
|
|
|
.apartment-QRcode-hint {
|
|
font-size: 14px;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
</style>
|