330 lines
6.8 KiB
Vue
330 lines
6.8 KiB
Vue
<template>
|
|
<div class="slider">
|
|
<div class="slider-container">
|
|
<img class="bg" src="@/assets/image/banner.jpg">
|
|
<div class="box">
|
|
<div class="text">
|
|
<h2>小发同城</h2>
|
|
<h3>店铺商家火热招募中</h3>
|
|
<p>开店成本低 0元开店</p>
|
|
</div>
|
|
<div class="sub">
|
|
<el-button :icon="Promotion" color="#ffc114" round size="large" @click="openRegisterForm">
|
|
免费开店
|
|
</el-button>
|
|
<el-button :icon="Download" round size="large" @click="downAndroid">
|
|
Android版本下载
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="counter_wrapper" data-aos="fade-up">
|
|
<div class="container">
|
|
<el-row :gutter="10">
|
|
<el-col :span="6">
|
|
<div class="count_box box_hover">
|
|
<i class="iconfont icon-employee1"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="businessmanValue"
|
|
:formatter="formatter"
|
|
:value-style="{ fontSize: '35px' }"
|
|
/>
|
|
</h3>
|
|
<p>商家数量</p>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="count_box box_center">
|
|
<i class="iconfont icon-baobei"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="productValue"
|
|
:formatter="formatter2"
|
|
:value-style="{ fontSize: '35px' }"
|
|
/>
|
|
</h3>
|
|
<p>商品数量</p>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="count_box box_hover">
|
|
<i class="iconfont icon-vip"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="memberValue"
|
|
:formatter="formatter"
|
|
:value-style="{ fontSize: '35px' }"
|
|
/>
|
|
</h3>
|
|
<p>会员数量</p>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="count_box box_hover">
|
|
<i class="iconfont icon-dingdan"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="orderValue"
|
|
:formatter="formatter2"
|
|
:value-style="{ fontSize: '35px' }"
|
|
/>
|
|
</h3>
|
|
<p>订单数量</p>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useTransition } from "@vueuse/core";
|
|
import { ref, onMounted, defineEmits, watch } from "vue";
|
|
import { Promotion, Download } from "@element-plus/icons-vue";
|
|
import { ElMessage } from 'element-plus'
|
|
import { getApproval_status } from "@/api/login";
|
|
|
|
import { useRouter } from "vue-router";
|
|
import { useUserStore } from "@/stores/userStore";
|
|
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
|
|
const isLoggedIn = ref(!!userStore.token);
|
|
const approval_status = ref(-1);
|
|
const businessman = ref(0);
|
|
const product = ref(0);
|
|
const member = ref(0);
|
|
const order = ref(0);
|
|
|
|
const emits = defineEmits(["open-register-form"]);
|
|
|
|
const openRegisterForm = () => {
|
|
if (!isLoggedIn.value) {
|
|
emits("open-register-form");
|
|
return;
|
|
}
|
|
|
|
if (approval_status.value == -1 || approval_status.value == 4) {
|
|
router.push({ name: "start" });
|
|
} else {
|
|
router.push({ name: "check" }); // 已登录跳转到 check 页面
|
|
}
|
|
};
|
|
|
|
const downAndroid = ()=>{
|
|
ElMessage.error('敬请期待~')
|
|
}
|
|
|
|
const businessmanValue = useTransition(businessman, {
|
|
duration: 1500,
|
|
});
|
|
const productValue = useTransition(product, {
|
|
duration: 1500,
|
|
});
|
|
const memberValue = useTransition(member, {
|
|
duration: 1500,
|
|
});
|
|
const orderValue = useTransition(order, {
|
|
duration: 1500,
|
|
});
|
|
|
|
businessman.value = 6274;
|
|
product.value = 62400;
|
|
member.value = 10800;
|
|
order.value = 12000;
|
|
|
|
const formatter = (value: number) => {
|
|
return `${Math.round(value)}+`;
|
|
};
|
|
const formatter2 = (value: number) => {
|
|
return `${Math.round(value)}k+`;
|
|
};
|
|
|
|
onMounted(()=>{
|
|
getApproval_status().then((res) => {
|
|
if (res.code === 0 && res.status === 200) {
|
|
approval_status.value = res.data.approval_status;
|
|
console.log("res.data.approval_status", res.data.approval_status);
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.slider {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.slider-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 800px;
|
|
// background: url("@/assets/image/banner1.jpg") no-repeat 50% 0;
|
|
// background-size:contain;
|
|
margin: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bg{
|
|
left: 50%;
|
|
object-fit: contain;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.box {
|
|
width: 1000px;
|
|
margin: auto;
|
|
height: 800px;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.sub {
|
|
position: absolute;
|
|
top: 58%;
|
|
transform: translateY(58%);
|
|
left: 150px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.counter_wrapper {
|
|
position: relative;
|
|
margin-top: -100px;
|
|
z-index: 12;
|
|
}
|
|
|
|
.counter_wrapper .count_box {
|
|
width: 100%;
|
|
padding: 15px 0;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
background: #fff;
|
|
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.08);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box i::before {
|
|
font-size: 60px;
|
|
color: #353535;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box h3 {
|
|
font-size: 35px;
|
|
font-weight: 500;
|
|
color: #353535;
|
|
margin: 15px 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box p {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #353535;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box:hover i::before {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.counter_wrapper .count_box:hover p {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.counter_wrapper .count_box:hover .el-statistic__content {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.counter_wrapper .count_box:hover {
|
|
background: #f34d2c;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
}
|
|
|
|
.container .el-row {
|
|
width: 100%;
|
|
}
|
|
|
|
.text{
|
|
display: none;
|
|
color: #fff;
|
|
margin-bottom: 20px;
|
|
|
|
h2{
|
|
font-size: 55px;
|
|
}
|
|
h3{
|
|
font-size: 32px;
|
|
margin-top: 10px;
|
|
}
|
|
p{
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.text{
|
|
display: block;
|
|
}
|
|
|
|
.bg{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
.slider-container {
|
|
height: 360px;
|
|
background: linear-gradient(180deg, #f85535, #f76c50);
|
|
|
|
.box {
|
|
width: 100%;
|
|
margin: auto;
|
|
height: 360px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.sub {
|
|
position: initial;
|
|
transform: none;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
button {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.counter_wrapper {
|
|
margin-top: 20px;
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|