vue-echarts官方文档：github.com/ecomfe/vue-…
安装
npm install echarts vue-echarts<echarts :options="trendChart" ref="trendEchart" style="width:100%;height:250px"></echarts>
import ECharts from "vue-echarts/components/ECharts.vue";import "echarts/lib/chart/line";import "echarts/lib/component/tooltip";
vue.config.js
module.exports = {
transpileDependencies: [
'vue-echarts',
'resize-detector'
]
}<template>
<div class="container">
<div class="container-main">
<div class="top">
<div class="top-icon"></div>
<div class="top-title">餐饮老板聚集地</div>
<div class="top-link" @click="goToLink">加入老板圈</div>
</div>
<div class="banner">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in slide" :key="index" class="itemImg">
<img :src="item.url" alt @click="scaleImg(item)" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<div class="box">
<div class="free-box">
<div class="free-title-big">{{postInvest?postInvest.shopName:''}}</div>
<div class="free-icon"></div>
</div>
<div class="content">{{postInvest?postInvest.address:''}}</div>
<div class="free-box">
<div class="free-title">投资门槛：</div>
<div class="free-num">
{{postInvest?postInvest.thresholdMin:''}}~{{postInvest?postInvest.thresholdMax:''}}万
<span class="free-tip">起</span>
</div>
<div class="free-space">{{postInvest?postInvest.brandType:''}}</div>
</div>
</div>
<div class="info-box">
<div class="info border-right">
<div class="info-title">直营店</div>
<div class="info-num">{{postInvest?postInvest.directCount:''}}</div>
</div>
<div class="info">
<div class="info-title">加盟店</div>
<div class="info-num">{{postInvest?postInvest.franchiseCount:''}}</div>
</div>
</div>
<div class="sponsor">
<div class="sponsor-left">
<div class="sponsor-profile">
<img :src="user?user.imgUrl:''" alt />
</div>
<div class="sponsor-info">
<div class="sponsor-info-name">{{user? user.nick:''}}</div>
<div class="sponsor-info-position">{{user?user.groupName:''}}{{user?user.position:''}}</div>
</div>
</div>
<div class="sponsor-right-icon"></div>
</div>
<div class="participation">
<div class="participation-title-bg">
<div class="participation-title participation-title-line">老板自述</div>
</div>
<div class="participation-content">{{postInvest?postInvest.introduction:''}}</div>
</div>
<div class="participation">
<div class="participation-title-bg">
<div class="participation-title participation-title-line">店铺信息</div>
</div>
<div class="participation-line">
<div class="participation-line-icon shop-icon"></div>
<div class="participation-line-title">店铺名称</div>
<div class="participation-line-info">{{postInvest?postInvest.shopName:''}}</div>
</div>
<div class="participation-line">
<div class="participation-line-icon address-icon"></div>
<div class="participation-line-title">店铺地址</div>
<div class="participation-line-info" @click="goToMap">{{postInvest?postInvest.address:''}}</div>
</div>
<div class="participation-line">
<div class="participation-line-icon area-icon"></div>
<div class="participation-line-title">店铺面积</div>
<div class="participation-line-info">{{postInvest?postInvest.area:''}}㎡</div>
</div>
<div class="participation-line">
<div class="participation-line-icon desk-icon"></div>
<div class="participation-line-title">桌台数量</div>
<div class="participation-line-info">{{postInvest?postInvest.looseTable:''}}散桌</div>
<div class="participation-line-info">{{postInvest?postInvest.privateRoom:''}}包间</div>
</div>
<div class="participation-line">
<div class="participation-line-icon employ-icon"></div>
<div class="participation-line-title">前厅员工数量</div>
<div class="participation-line-info">{{postInvest?postInvest.staffCount:''}}人</div>
</div>
<div class="participation-line">
<div class="participation-content participation-content-tip-gray">以上数据由商家填写，实际情况请以到店考察为准！</div>
</div>
</div>
<div class="participation">
<div class="participation-title-bg">
<div class="participation-title participation-title-line">该店铺营业数据</div>
</div>
<div class="participation-content participation-content-tip">
<div>该店铺公布了30天的营业数据</div>
<div>数据时间：{{beginDate}}~{{endDate}}</div>
<div>数据来源：哗啦啦云端数据存储服务</div>
</div>
<div class="participation-line">
<div class="participation-line-icon income-icon"></div>
<div class="participation-line-title">30天实收</div>
<div class="participation-line-info">{{busiData.paidAmount}}</div>
</div>
<div class="participation-line">
<div class="participation-line-icon order-icon"></div>
<div class="participation-line-title">90天订单</div>
<div class="participation-line-info">{{busiData.orderCount}}</div>
</div>
<div class="participation-line">
<div class="participation-line-icon bill-icon"></div>
<div class="participation-line-title">单均</div>
<div class="participation-line-info">{{busiData.orderAvg}}</div>
</div>
<div class="participation-line">
<div class="participation-line-icon people-icon"></div>
<div class="participation-line-title">人均</div>
<div class="participation-line-info">{{busiData.personAvg}}</div>
</div>
<div class="participation-end">
<div class="participation-end-line">
<div class="participation-line-icon effect-icon"></div>
<div class="participation-line-title">30天坪效</div>
<div class="participation-line-info">{{busiData.paidAmount/postInvest.area}}</div>
</div>
<div class="participation-end-tip">坪效=实收/店铺面积，注意:坪效根据实际店铺面积会有浮动，请以实地考察的真实店铺面积计算为准</div>
</div>
</div>
<div class="bussiness-box">
<div class="bussiness-title">30天实收数据</div>
<div class="bussiness-maxNum">{{maxNumber}}</div>
<echarts :options="trendChart" ref="trendEchart" style="width:100%;height:250px"></echarts>
</div>
<div class="participation participation-margin-bottom" v-if="postContactCommentVOList.length>0">
<div class="participation-title-bg">
<div class="participation-title">共{{postContactCommentVOList.length}}个意向</div>
</div>
<div v-for="item in postContactCommentVOList" :key="item.id">
<div class="participation-item">
<div class="participation-item-pic">
<img :src="item.user?item.user.imgUrl:''" alt />
</div>
<div class="participation-item-detail">
<div class="participation-detail-title">
<span>{{item.user.brandName}}</span>
<span>{{item.user.nick}}</span>
<span>{{item.user.groupName}}</span>
<span>{{item.user.position}}</span>
</div>
<div class="participation-detail-tip">
{{item.remarks}}
<span>{{item.createTime|changeTime}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="bottom"
:class="{ 'complete': complete }"
@click="showPopup"
>{{complete?'已咨询':'咨询一下'}}</div>
<div class="popContainer" v-if="show">
<div class="pop-box">
<div class="pop-title-box">
<span class="iconfont icon-guanbi" style="color: #FFFFFF"></span>
<div class="pop-title">咨询一下</div>
<span class="iconfont icon-guanbi" @click="closePop"></span>
</div>
<div class="pop-input-box border-1px">
<span class="pop-input-title">老板贵姓</span>
<span class="pop-input">
<input type="text" v-model="username" @blur="onBlurInput()" style="width: 90px" />
</span>
<div class="radio-box" v-for="(item, index) in radios" :key="item.id">
<span
class="radio_chek"
:class="item.isChecked ?'choseImg' : 'unchoseImg'"
@click="huoqu(index)"
></span>
<span class="radio-text">
<input
type="radio"
style="display: none"
:value="item.value"
v-model="sex"
:checked="item.isChecked"
/>
{{item.label}}
</span>
</div>
</div>
<div class="pop-input-box">
<span class="pop-input-title">联系方式</span>
<span class="pop-input">
<input type="tel" v-model="phone" @blur="onBlurInput()" />
</span>
</div>
<div class="pop-input-box">
<span class="pop-input-title" style="padding-right: 1em">验证码</span>
<span class="pop-input">
<input type="text" v-model="dynamicCode" @blur="onBlurInput()" />
</span>
<span @click="changeCode">
<img :src="imgSrc" alt />
</span>
</div>
<div class="pop-input-box">
<span class="pop-input-title">备注</span>
<span class="pop-input">
<textarea
class="text-size"
v-model="remarks"
@blur="onBlurInput()"
placeholder="这项目我很感兴趣 ，咱们电话联系！"
></textarea>
</span>
</div>
<div class="bottom" @click="submitApply">提交</div>
</div>
</div>
<div class="popContainer" v-if="showScaleImg">
<div @click="closeScaleImg" class="scale-box">
<img :src="imgScaleSrc" alt class="scale-img" />
</div>
</div>
</div>
</template>
<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getPostDetail, saveContact, getDynamicCode } from "@/api/share";
import CryptoJS from "crypto-js";
export default {
components: {
swiper,
swiperSlide,
echarts: ECharts
},
data() {
return {
postInvest: {},
user: {},
maxNumber: 0,
beginDate: '',
endDate:'',
slide: [],
show: false,
complete: false,
username: "",
remarks: "",
phone: "",
sex: "female",
radios: [
{
label: "男",
value: "male",
isChecked: true
},
{
label: "女",
value: "female",
isChecked: false
}
],
dynamicCode: "",
imgSrc: "",
postItem: {},
key: "3cqUKtWy",
swiperOption: {
pagination: {
el: ".swiper-pagination"
}
},
imgScaleSrc: "",
showScaleImg: false,
keyHex: "9443e1d48a804bf69f3fde9192db929c",
lat: "",
lon: "",
address: "",
busiData: {},
postContactCommentVOList: [],
trendChart: {
grid: {
left: "15",
right: "15",
bottom: "40",
top: "20",
containLabel: false
},
tooltip: {
//鼠标移入效果
show: true,
trigger: "axis",
backgroundColor: "#ffffff",
borderColor: "#cccccc",
textStyle: {
color: "black" //设置文字颜色
},
padding: 2,
position: function(point, params, dom, rect, size) {
var x = 0; // x坐标位置
var y = 0;
var pointX = point[0];
var pointY = point[1];
var boxWidth = size.contentSize[0];
if (boxWidth > pointX) {
x = 50;
} else {
// 左边放的下
x = pointX - boxWidth - 10;
}
y = pointY;
return [x, y];
}
},
formatter: function(params) {
let title = params[0].axisValue;
let value = params[0].data;
let myDate = new Date();
let tYear = myDate.getFullYear();
let date = tYear + '.'+ title
var dt = new Date(date.split(".")[0], date.split(".")[1]-1, date.split(".")[2]);
var weekDay = [
"周日",
"周一",
"周二",
"周三",
"周四",
"周五",
"周六"
];
return title + "(" + weekDay[dt.getDay()] + ")" + "<br/>" + value;
},
xAxis: {
type: "category",
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
fontSize: 10,
interval: 6,
color: "#333333",
align: "left"
},
data: [],
nameTextStyle: {
color: "red",
align: "right"
}
},
yAxis: {
show: true,
type: "value",
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: "transparent"
}
},
splitLine: {
show: false
}
},
series: [
{
name: "",
type: "line",
smooth: true,
symbol: null,
itemStyle: {
//标志点颜色
normal: {
color: "transparent",
borderWidth: 0,
areaStyle: {
type: "default",
color: "rgba(232,247,255,1)"
},
lineStyle: {
color: "#00AFF0",
width: 3
}
},
emphasis: {
color: "rgba(211,58,49,0.7)",
borderWidth: 6
}
},
markPoint: {
//标志点
clickable: false,
symbol: "none",
itemStyle: {
normal: {
color: "yellow"
},
emphasis: {
color: "blue"
}
}
},
data: []
}
]
}
};
},
created() {
this.getParam();
this.getPostDetail();
this.getCode();
},
filters: {
changeTime(seconds = 0) {
let timestamp = new Date().getTime()
let result = timestamp - seconds
let endOutStr = ''
let minute = 1000 * 60;
let hour = minute *60;
let day = hour *24;
if(result <= minute) {
return endOutStr = Math.floor(result/minute) + "分钟前"
} else if(result < hour){
return endOutStr = Math.floor(result/hour) + "小时前"
} else {
return endOutStr = Math.floor(result/day) + "天前"
}
}
},
methods: {
getCode() {
getDynamicCode(this.key).then(res => {
this.imgSrc = res;
});
},
changeCode() {
this.getCode();
},
huoqu(index) {
// 先取消所有选中项
this.radios.forEach(item => {
item.isChecked = false;
});
//再设置当前点击项选中
this.sex = this.radios[index].value;
// 设置值，以供传递
this.radios[index].isChecked = true;
},
goToMap() {
const { lat, lon, address } = this;
this.$router.push({ path: "/map", query: { lat, lon, address } });
},
decryptByDES(text, key) {
var base64 = CryptoJS.enc.Utf8.parse(key);
var decrypt = CryptoJS.TripleDES.decrypt(text, base64, {
iv: CryptoJS.enc.Utf8.parse("01234567"),
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
//解析数据后转为UTF-8
var parseData = decrypt.toString(CryptoJS.enc.Utf8);
this.busiData = JSON.parse(parseData);
const infoList = this.busiData.infoList;
const xData = infoList.map(item => {
return item.name;
});
const seriesData = infoList.map(item => {
return item.paidAmount;
});
this.trendChart.xAxis.data = xData;
this.trendChart.series[0].data = seriesData;
this.maxNumber = Math.max.apply(null, seriesData);
const beginDateStr = infoList[0].reportDate
const endDateStr = infoList[infoList.length -1].reportDate
this.beginDate = beginDateStr.slice(0,4)+'.'+beginDateStr.slice(4,6)+'.'+beginDateStr.slice(6,8)
this.endDate = endDateStr.slice(0,4)+'.'+endDateStr.slice(4,6)+'.'+endDateStr.slice(6,8)
},
goToLink() {
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.dld.boss.pro&from=singlemessage";
},
onBlurInput() {
window.scroll(0, 0);
},
scaleImg(item) {
this.showScaleImg = true;
this.imgScaleSrc = item.url;
},
closeScaleImg() {
this.showScaleImg = false;
},
getParam() {
let key = this.$route.query.key;
this.key = key;
},
showPopup() {
if (this.complete === false) {
this.show = true;
}
},
submitApply() {
if (this.username === "") {
this.$message({
message: "请输入姓名",
type: "warning"
});
return;
}
if (this.phone === "") {
this.$message({
message: "请输入手机号",
type: "warning"
});
return;
}
if (this.phone !== "") {
var reg = /^1[3456789]\d{9}$/;
if (!reg.test(this.phone)) {
this.$message({
message: "请输入有效的手机号码",
type: "warning"
});
return;
}
}
saveContact({
phone: this.phone,
userName: this.username,
key: this.key,
sex: this.sex,
dynamicCode: this.dynamicCode,
remarks: this.remarks
}).then(res => {
let { code, message } = res;
if (code === 200) {
this.show = false;
this.complete = true;
}
this.$message({
message: code === 200 ? "提交成功" : message,
type: code === 200 ? "success" : "warning"
});
});
},
closePop() {
this.show = false;
},
getPostDetail() {
getPostDetail({
key: this.key
}).then(res => {
const { postItem, postContactCommentVOList } = res;
this.postInvest = postItem.postInvest;
this.slide = postItem.imgs;
this.user = postItem.user;
this.lat = postItem.lbs.lat;
this.lon = postItem.lbs.lon;
this.address = postItem.lbs.addressName;
this.postContactCommentVOList = postContactCommentVOList;
this.decryptByDES(this.postInvest.busiData, this.keyHex);
});
}
}
};
</script>
<style lang="less" scoped>
.container {
background: #efefef;
display: flex;
flex-direction: column;
overflow: hidden;
.container-main {
height: calc(100vh - 46px);
overflow-y: scroll;
.top {
display: flex;
align-items: center;
background: #ffffff;
height: 45px;
.top-icon {
margin-left: 10px;
background-image: url("../../assets/logo-pro@2x.png");
background-size: contain;
width: 28px;
height: 28px;
}
.top-title {
margin-left: 15px;
color: #333333;
font-size: 15px;
}
.top-link {
margin-right: 10px;
margin-left: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #d33a31;
border-radius: 25px;
height: 25px;
width: 80px;
color: #ffffff;
font-size: 13px;
}
}
.banner {
overflow: hidden;
width: 100%;
height: 222px;
.itemImg {
height: 222px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.box {
background: #ffffff;
padding: 4.5px 10px 14px;
.title {
font-size: 16px;
font-weight: bold;
color: #333333;
}
.content {
margin-top: 11.5px;
font-size: 13px;
font-weight: 500;
color: #787878;
}
.free-box {
padding-top: 14.5px;
display: flex;
flex-direction: row;
align-items: center;
.free-title {
font-size: 13px;
font-weight: 500;
color: #787878;
}
.free-title-big {
font-size: 16px;
color: #333333;
font-weight: bold;
}
.free-icon {
margin-left: 8px;
background-image: url("../../assets/authentication-icon@2x.png");
background-size: contain;
width: 74px;
height: 16.5px;
}
.free-num {
font-size: 13px;
font-weight: 500;
color: #d33a31;
.free-tip {
font-size: 10px;
font-weight: 500;
color: #787878;
}
}
.free-space {
margin-left: 9px;
color: #f86a01;
font-size: 12px;
font-weight: 500;
border: 1px solid rgba(248, 106, 1, 1);
border-radius: 3px;
padding: 5px 10px;
}
}
}
.info-box {
background: #ffffff;
box-shadow: 0px -1px 0px 0px rgba(230, 230, 230, 1),
0px 1px 0px 0px rgba(230, 230, 230, 1);
display: flex;
height: 65px;
justify-content: space-around;
padding: 10px 0;
.info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
flex: 1;
.info-title {
font-size: 13px;
font-weight: 500;
color: #333333;
}
.info-num {
font-size: 16px;
font-weight: 500;
color: #d33a31;
}
}
}
.sponsor {
margin-top: 10px;
background: #ffffff;
display: flex;
justify-content: space-between;
.sponsor-left {
display: flex;
align-items: center;
padding: 17px 0 18px 10px;
.sponsor-profile {
img {
width: 45px;
height: 45px;
border-radius: 50%;
}
}
.sponsor-info {
display: flex;
flex-direction: column;
padding-left: 10px;
.sponsor-info-name {
font-size: 14px;
font-weight: bold;
color: #333333;
}
.sponsor-info-position {
font-size: 11px;
font-weight: 500;
color: #999999;
margin-top: 9px;
}
}
}
.sponsor-right-icon {
background-image: url("../../assets/sponsor-icon@2x.png");
background-size: contain;
width: 43px;
height: 43px;
}
}
.participation {
display: flex;
flex-direction: column;
margin-top: 10px;
background: #ffffff;
&.participation-margin-bottom {
padding-bottom: 24px;
}
.participation-title-bg {
display: flex;
align-items: center;
height: 45px;
box-shadow: 0px 1px 0px 0px rgba(230, 230, 230, 1);
.participation-title {
font-size: 14px;
font-weight: 500;
padding-left: 8px;
color: #333333;
}
.participation-title-line {
border-left: 2px solid #d33a31;
}
}
.participation-content {
padding: 15px 10px;
&.participation-content-tip {
background: #fff8f8;
color: #d33a31;
font-size: 13px;
font-weight: 500;
box-shadow: 0px 1px 0px 0px rgba(230, 230, 230, 1);
div {
line-height: 20px;
}
}
&.participation-content-tip-gray {
font-weight: 500;
font-size: 13px;
color: #999999;
}
}
.participation-end {
display: flex;
flex-direction: column;
box-shadow: 0px 1px 0px 0px rgba(230, 230, 230, 1);
.participation-end-line {
display: flex;
align-items: center;
margin-top: 15px;
.participation-line-icon {
margin-left: 10px;
background-size: 100% 100%;
&.effect-icon {
width: 15.5px;
height: 16.5px;
background-image: url("../../assets/effect-icon@2x.png");
}
}
.participation-line-title {
margin-left: 15px;
color: #333333;
font-size: 15px;
}
.participation-line-info {
margin-right: 10px;
margin-left: auto;
color: #333333;
font-size: 14px;
}
}
.participation-end-tip {
margin: 8px 20px 6px 10px;
color: #999999;
font-size: 13px;
line-height: 20px;
}
}
.participation-line {
display: flex;
align-items: center;
height: 45px;
box-shadow: 0px 1px 0px 0px rgba(230, 230, 230, 1);
.participation-line-icon {
margin-left: 10px;
background-size: 100% 100%;
&.shop-icon {
width: 16.5px;
height: 14.5px;
background-image: url("../../assets/shop-icon@2x.png");
}
&.address-icon {
width: 14.5px;
height: 18.5px;
background-image: url("../../assets/address-icon@2x.png");
}
&.area-icon {
width: 16.5px;
height: 18px;
background-image: url("../../assets/area-icon@2x.png");
}
&.desk-icon {
width: 16.5px;
height: 14.5px;
background-image: url("../../assets/desk-icon@2x.png");
}
&.employ-icon {
width: 14px;
height: 18px;
background-image: url("../../assets/employ-icon@2x.png");
}
&.income-icon {
width: 18px;
height: 18px;
background-image: url("../../assets/income-icon@2x.png");
}
&.order-icon {
width: 15px;
height: 18px;
background-image: url("../../assets/order-icon@2x.png");
}
&.bill-icon {
width: 15px;
height: 18px;
background-image: url("../../assets/bill-icon@2x.png");
}
&.people-icon {
width: 18px;
height: 18px;
background-image: url("../../assets/people-icon@2x.png");
}
&.effect-icon {
width: 15.5px;
height: 16.5px;
background-image: url("../../assets/effect-icon@2x.png");
}
}
.participation-line-title {
margin-left: 15px;
color: #333333;
font-size: 15px;
}
.participation-line-info {
margin-right: 10px;
margin-left: auto;
color: #333333;
font-size: 14px;
}
}
.participation-icon {
padding: 0 10px 15px;
display: flex;
flex-wrap: wrap;
span {
padding-top: 15px;
padding-right: 8px;
img {
width: 32px;
height: 32px;
border-radius: 50%;
}
}
}
.participation-item {
display: flex;
flex-direction: row;
margin: 15px 10px 5px;
.participation-item-pic {
margin-right: 8px;
img {
width: 28px;
height: 28px;
border-radius: 50%;
}
}
.participation-item-detail {
display: flex;
flex-direction: column;
flex: 1;
.participation-detail-title {
color: #999999;
font-size: 11px;
font-weight: 500;
span {
margin-left: 5px;
}
}
.participation-detail-tip {
margin-top: 10px;
background: #f7f7f7;
color: #555555;
font-size: 13px;
font-weight: 500;
padding: 10px 0 8.5px 10px;
}
}
}
}
}
.bottom {
background: #d33a31;
color: #ffffff;
font-size: 16px;
font-weight: 500;
text-align: center;
padding: 15px 0;
&.complete {
background: #d8d8d8;
}
}
}
.pop-box {
background: #ffffff;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
.pop-title-box {
display: flex;
justify-content: space-between;
align-items: center;
.pop-title {
font-size: 14px;
font-weight: 500;
color: #333333;
padding: 17px 0;
}
.iconfont {
color: #999999;
font-size: 20px;
margin-right: 10px;
}
}
.pop-input-box {
display: flex;
align-items: center;
padding: 20px 10px 0 11px;
.radio-box {
display: flex;
align-items: center;
.radio_chek {
width: 20px;
height: 20px;
background-size: 100% 100%;
margin-left: 15px;
}
.radio-text {
margin-left: 6px;
}
.choseImg {
background-image: url("../../assets/radio-active-icon@2x.png");
}
.unchoseImg {
background-image: url("../../assets/radio-icon@2x.png");
}
}
.pop-input-title {
font-size: 15px;
font-weight: 500;
color: #333333;
width: 60px;
text-align: right;
}
.pop-input {
margin-left: 15px;
input {
border: 1px solid rgba(230, 230, 230, 1);
border-radius: 6px;
padding: 15px 10px;
outline-style: none;
font-size: 15px;
}
.text-size {
border: 1px solid rgba(230, 230, 230, 1);
border-radius: 6px;
padding: 15px 10px;
outline-style: none;
font-size: 15px;
width: 275px;
height: 108px;
}
}
}
.bottom {
margin: 30px 10px 15px;
}
}
.popContainer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0, 0, 0, 0.3);
}
.scale-box {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
}
.scale-img {
max-width: 100%;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
.bussiness-box {
display: flex;
flex-direction: column;
background: #ffffff;
.bussiness-title {
font-size: 14px;
font-weight: bold;
color: #333333;
text-align: center;
margin: 24px 0;
}
.bussiness-maxNum {
font-size: 10px;
font-weight: 500;
color: #999999;
margin-left: 15px;
}
}
</style>
