feat: 设计制作新的首页；设计新的LOGO；登录注册优化UI交互；页头页脚改造；意见反馈页改造；
This commit is contained in:
mixtan
parent
3bb1de8008
commit
136bb433c8
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||
<title>小发同城</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -4,8 +4,21 @@
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body{
|
||||
font-size: 12px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:root {
|
||||
--bgcolor: #409eff;
|
||||
--bgcolor: #ea4322;
|
||||
}
|
||||
|
||||
html{
|
||||
@ -15,7 +28,7 @@ html{
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn {
|
||||
background: #7354ff;
|
||||
background: #ea4322;
|
||||
border: medium none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
@ -50,13 +63,13 @@ html{
|
||||
|
||||
.btn:not(:disabled):not(.disabled):active,
|
||||
:focus {
|
||||
color: #7354ff;
|
||||
color: #ea4322;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
background: #000b22;
|
||||
color: #7354ff;
|
||||
border-color: #000b22;
|
||||
background: #ea4322;
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
@ -70,9 +83,6 @@ html{
|
||||
}
|
||||
/* 固定定位*/
|
||||
.header-list {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: #fff;
|
||||
@ -100,9 +110,10 @@ html{
|
||||
padding-left: 20px;
|
||||
}
|
||||
.logo a {
|
||||
background: url("../../assets/image/xiaofa_logo.png");
|
||||
background: url("../../assets/image/logo.jpg") no-repeat;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
background-size: contain;
|
||||
outline: none;
|
||||
@ -229,26 +240,6 @@ html{
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.index-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.index-title h3 {
|
||||
padding-top: 30px;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.index-title p {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
max-width: 580px;
|
||||
margin: 15px auto 0px auto;
|
||||
}
|
||||
|
||||
.service-contain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -289,7 +280,7 @@ html{
|
||||
transition: 0.3s;
|
||||
}
|
||||
.service-list ul li:hover {
|
||||
background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
|
||||
background: linear-gradient(90.54deg, #ec4b2b 0.42%, #f85535 102.71%);
|
||||
}
|
||||
.service-list ul li:hover i::before {
|
||||
color: #fff;
|
||||
@ -300,76 +291,3 @@ html{
|
||||
.service-list ul li:hover i::before p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*页脚*/
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #000b22;
|
||||
padding: 20px;
|
||||
}
|
||||
.footer .row .el-row{
|
||||
width: 100%;
|
||||
}
|
||||
.footer .row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.footer .row p {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.footer .row ul {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.footer .logo_text p {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
padding: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.footer .row .about {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
line-height: 38px;
|
||||
}
|
||||
.footer .row .contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
line-height: 38px;
|
||||
}
|
||||
.footer .row .contact span {
|
||||
color: #b6b6b6;
|
||||
}
|
||||
.footer .row a {
|
||||
color: #b6b6b6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
color: #fff;
|
||||
}
|
||||
.footer li {
|
||||
list-style: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer .copyright {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.footer .copyright p {
|
||||
color: #fff;
|
||||
}
|
||||
.footer .copyright a {
|
||||
color: #808080;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
BIN
src/assets/image/banner1.jpg
Normal file
BIN
src/assets/image/banner1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
src/assets/image/logo.jpg
Normal file
BIN
src/assets/image/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<HeadMenu @open-login-form="showLoginForm = true" @open-register-form="showRegisterForm = true" />
|
||||
<div class="contain">
|
||||
<div class="main">
|
||||
<slot />
|
||||
<Feedback/>
|
||||
<Footer/>
|
||||
@ -26,12 +26,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contain {
|
||||
min-height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.routerView {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,68 +1,78 @@
|
||||
<template>
|
||||
<div class="login-box" v-if="isVisible">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-width="88px"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<div class="login-container">
|
||||
<div class="login-close" @click="closeLoginForm">
|
||||
<el-icon color="#333" size="24" class="btn_close"><Close /></el-icon>
|
||||
</div>
|
||||
<h4>欢迎登录</h4>
|
||||
<div class="passwordLogin">
|
||||
<div class="login-phone">
|
||||
<el-form-item label="账号" prop="phoneNumber">
|
||||
<el-input
|
||||
size="large"
|
||||
v-model="formData.phoneNumber"
|
||||
placeholder="请输入账号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="login_password">
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
size="large"
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="pic_verifyCode">
|
||||
<el-form-item label="验证码" prop="captchaCode">
|
||||
<el-input
|
||||
size="large"
|
||||
type="text"
|
||||
v-model="formData.captchaCode"
|
||||
placeholder="请输入验证码"
|
||||
maxlength="4"
|
||||
>
|
||||
<template #append>
|
||||
<img class="captcha" :src="captchaUrl" alt="验证码" @click="refreshCaptcha" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<el-button class="btn_sumit" size="large" round type="primary" @click="handleLogin">登录</el-button>
|
||||
</div>
|
||||
<div class="tool">
|
||||
没有账号？
|
||||
<el-button
|
||||
class="btn_sumit"
|
||||
type="primary"
|
||||
link
|
||||
@click="openRegisterForm"
|
||||
>立即入驻</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="login-close" @click="closeLoginForm">
|
||||
<el-icon color="#333" size="24" class="btn_close"><Close /></el-icon>
|
||||
</div>
|
||||
</el-form>
|
||||
<h4>欢迎登录</h4>
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-width="88px"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-form-item label="账号" prop="phoneNumber">
|
||||
<el-input
|
||||
size="large"
|
||||
v-model="formData.phoneNumber"
|
||||
placeholder="请输入账号"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
size="large"
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="验证码" prop="captchaCode">
|
||||
<el-input
|
||||
size="large"
|
||||
type="text"
|
||||
v-model="formData.captchaCode"
|
||||
placeholder="请输入验证码"
|
||||
maxlength="4"
|
||||
>
|
||||
<template #append>
|
||||
<img
|
||||
class="captcha"
|
||||
:src="captchaUrl"
|
||||
alt="验证码"
|
||||
@click="refreshCaptcha"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="foot">
|
||||
<el-button
|
||||
color="#ea4322"
|
||||
class="btn_sumit"
|
||||
size="large"
|
||||
round
|
||||
@click="handleLogin"
|
||||
:disabled="
|
||||
!formData.phoneNumber || !formData.password || !formData.captchaCode
|
||||
"
|
||||
>登录</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="tool">
|
||||
没有账号？
|
||||
<el-button
|
||||
class="btn_sumit"
|
||||
type="danger"
|
||||
text
|
||||
@click="openRegisterForm"
|
||||
>立即入驻</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -84,7 +94,7 @@ import {
|
||||
GetAccountLogin,
|
||||
} from "@/api/login";
|
||||
import { ElMessage } from "element-plus/es";
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps({
|
||||
isVisible: {
|
||||
@ -111,8 +121,8 @@ const closeLoginForm = () => {
|
||||
};
|
||||
|
||||
const openRegisterForm = () => {
|
||||
closeLoginForm()
|
||||
emits('open-register-form');
|
||||
closeLoginForm();
|
||||
emits("open-register-form");
|
||||
};
|
||||
|
||||
const refreshCaptcha = async () => {
|
||||
@ -197,11 +207,11 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-box {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -233,9 +243,9 @@ onUnmounted(() => {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
.btn_close{
|
||||
.btn_close {
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
&:hover {
|
||||
color: #409efc;
|
||||
}
|
||||
}
|
||||
@ -254,17 +264,17 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input-group__append){
|
||||
:deep(.el-input-group__append) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.captcha{
|
||||
.captcha {
|
||||
cursor: pointer;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tool{
|
||||
.tool {
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -274,5 +284,4 @@ onUnmounted(() => {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="register-box" v-if="isVisible">
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-width="88px"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<div class="register-container">
|
||||
<div class="register-close" @click="closeRegisterForm">
|
||||
<el-icon color="#333" size="24" class="btn_close"><Close /></el-icon>
|
||||
</div>
|
||||
<h4>欢迎入驻开店</h4>
|
||||
<div class="register-container">
|
||||
<div class="register-close" @click="closeRegisterForm">
|
||||
<el-icon color="#333" size="24" class="btn_close"><Close /></el-icon>
|
||||
</div>
|
||||
<h4>欢迎入驻开店</h4>
|
||||
<el-form
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-width="88px"
|
||||
:hide-required-asterisk="true"
|
||||
>
|
||||
<el-form-item label="手机号" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="formData.phoneNumber"
|
||||
@ -49,30 +49,25 @@
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="foot">
|
||||
<el-button
|
||||
class="btn_sumit"
|
||||
type="primary"
|
||||
size="large"
|
||||
:disabled="!formData.phoneNumber || !formData.verificationCode"
|
||||
round
|
||||
@click="handleRegister"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="tool">
|
||||
已有账号？
|
||||
<el-button
|
||||
class="btn_sumit"
|
||||
type="primary"
|
||||
link
|
||||
@click="openLoginForm"
|
||||
>立即登录</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="foot">
|
||||
<el-button
|
||||
class="btn_sumit"
|
||||
color="#ea4322"
|
||||
size="large"
|
||||
:disabled="!formData.phoneNumber || !formData.verificationCode"
|
||||
round
|
||||
@click="handleRegister"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="tool">
|
||||
已有账号？
|
||||
<el-button class="btn_sumit" type="danger" text @click="openLoginForm"
|
||||
>立即登录</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -83,7 +78,7 @@ import { useRouter } from "vue-router";
|
||||
import { GetSmsCode, GetLogin } from "@/api/login";
|
||||
import { getApproval_status } from "@/api/login";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps({
|
||||
isVisible: {
|
||||
@ -91,7 +86,7 @@ const props = defineProps({
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['open-login-form', "close-register-form"]);
|
||||
const emits = defineEmits(["open-login-form", "close-register-form"]);
|
||||
const formData = ref({
|
||||
phoneNumber: "",
|
||||
verificationCode: "",
|
||||
@ -111,8 +106,8 @@ const closeRegisterForm = () => {
|
||||
};
|
||||
|
||||
const openLoginForm = () => {
|
||||
closeRegisterForm()
|
||||
emits('open-login-form');
|
||||
closeRegisterForm();
|
||||
emits("open-login-form");
|
||||
};
|
||||
|
||||
const getVerify_code = async () => {
|
||||
@ -232,80 +227,80 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.register-box {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 1000101;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
z-index: 1000102 !important; // 确保这个值高于遮罩层的 z-index
|
||||
}
|
||||
|
||||
.foot {
|
||||
padding-top: 20px;
|
||||
.btn_sumit {
|
||||
display: block;
|
||||
width: 100%;
|
||||
.el-message {
|
||||
z-index: 1000102 !important; // 确保这个值高于遮罩层的 z-index
|
||||
}
|
||||
|
||||
.btn_code {
|
||||
display: block;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
padding-top: 20px;
|
||||
.btn_sumit {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
width: 500px;
|
||||
position: relative;
|
||||
|
||||
h4 {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.verifyAndButton {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.register-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
.btn_close{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: #409efc;
|
||||
}
|
||||
.btn_code {
|
||||
display: block;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool{
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
.register-container {
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
width: 500px;
|
||||
position: relative;
|
||||
|
||||
h4 {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.verifyAndButton {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.register-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
.btn_close {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #409efc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool {
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8" class="col1">
|
||||
<div class="foot_menu">
|
||||
<el-row :gutter="20" class="box">
|
||||
<el-col :span="4" class="col1">
|
||||
<div class="logo_text">
|
||||
<img src="@/assets/image/xiaofa_logo.png" alt="Android版本下载">
|
||||
<img src="@/assets/image/logo.jpg" alt="Android版本下载" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
|
||||
<el-col :span="10">
|
||||
<div class="about">
|
||||
<p>关于</p>
|
||||
<h3>关于</h3>
|
||||
<ul>
|
||||
<li v-for="a in aboutList" :key="a.id">
|
||||
<router-link :to="{ name: a.name }">{{ a.title }}</router-link>
|
||||
@ -18,9 +17,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
|
||||
<el-col :span="10">
|
||||
<div class="contact">
|
||||
<p>联系我们</p>
|
||||
<h3>联系我们</h3>
|
||||
<ul>
|
||||
<li v-for="c in contactList" :key="c.id">
|
||||
<span>{{ c.title }}</span>
|
||||
@ -29,26 +28,29 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<p>©桂平发发网络有限公司版权所有
|
||||
<a href="https://beian.miit.gov.cn" target="_blank">桂ICP备2024040484号-1</a>
|
||||
<a href="https://beian.miit.gov.cn" target="_blank">经营许可证编号:桂B2-20240661</a>
|
||||
<a @click.prevent="openLicenseImage">营业执照</a>
|
||||
</p>
|
||||
copyright@ 桂平发发网络有限公司
|
||||
<a href="https://beian.miit.gov.cn" target="_blank"
|
||||
>桂ICP备2024040484号-1</a
|
||||
>
|
||||
<a href="https://beian.miit.gov.cn" target="_blank"
|
||||
>桂公网安备45088105000134号</a
|
||||
>
|
||||
|
||||
<a href="https://beian.miit.gov.cn" target="_blank"
|
||||
>经营许可证编号:桂B2-20240661</a
|
||||
>
|
||||
<a target="_blank" href="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/default/20250407/dcd90acd12634546b46a701698af30a1.png">营业执照</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
let aboutList = [
|
||||
{ id: 1, title: "关于我们", name: 'about' },
|
||||
{ id: 2, title: "加入我们" , name: 'about' },
|
||||
{ id: 3, title: "商户入驻隐私协议" , name: 'AusinessAgreementPrivacy' }
|
||||
{ id: 1, title: "关于我们", name: "about" },
|
||||
{ id: 2, title: "加入我们", name: "about" },
|
||||
{ id: 3, title: "商户入驻隐私协议", name: "AusinessAgreementPrivacy" },
|
||||
];
|
||||
|
||||
let contactList = [
|
||||
@ -57,26 +59,56 @@ let contactList = [
|
||||
{ id: 3, title: "地址:广西贵港市桂平市西山镇桂南路盐业大厦对面4楼" },
|
||||
];
|
||||
|
||||
const openLicenseImage = () => {
|
||||
const toUrl = "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/default/20250407/dcd90acd12634546b46a701698af30a1.png"
|
||||
window.open()?.document.write(`<!DOCTYPE html><html><body><img src='${toUrl}'/></body></html>`);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.copyright a {
|
||||
cursor: pointer;
|
||||
.footer {
|
||||
background: #000b22;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin:0 5px;
|
||||
color: #999;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col1{
|
||||
|
||||
.foot_menu {
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.col1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo_text{
|
||||
img{
|
||||
width: 96px;
|
||||
border-radius: 100%;
|
||||
|
||||
.logo_text {
|
||||
img {
|
||||
width: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.copyright {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.foot_menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copyright{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
<div class="header-right">
|
||||
<!-- 免费开店按钮始终可见 -->
|
||||
<div class="start">
|
||||
<el-button type="primary" @click="handleOpenStartPage">
|
||||
<el-button color="#ea4322" @click="handleOpenStartPage">
|
||||
立即入驻
|
||||
</el-button>
|
||||
</div>
|
||||
<!-- 根据登录状态显示不同按钮 -->
|
||||
<div class="login">
|
||||
<el-button plain type="primary" @click="openLoginForm" class="login-button">
|
||||
<el-button plain color="#f85535" @click="openLoginForm" class="login-button">
|
||||
商家登录
|
||||
</el-button>
|
||||
</div>
|
||||
@ -39,12 +39,14 @@
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="login-register-module">
|
||||
<span @click="handleOpenStartPage">立即入驻</span>
|
||||
<span>|</span>
|
||||
<span @click="openLoginForm">商家登录</span>
|
||||
<span v-if="isLoggedIn" @click="logout">退出</span>
|
||||
</div>
|
||||
|
||||
<!-- 汉堡菜单 -->
|
||||
<div class="hamburger-menu" @click="toggleMenu">
|
||||
<span :class="{ 'hamburger-icon': true, 'rotate-top': isMenuOpen, }"></span>
|
||||
@ -266,6 +268,9 @@ onUnmounted(() => {
|
||||
.header-menu {
|
||||
display: none;
|
||||
}
|
||||
/* .header-menu {
|
||||
display: none;
|
||||
}
|
||||
.mobile-menu{
|
||||
padding: 32px 24px;
|
||||
border-top: 2px solid #DCDCDC;
|
||||
@ -280,6 +285,6 @@ onUnmounted(() => {
|
||||
|
||||
.login-register-module {
|
||||
display: flex;
|
||||
}
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
@ -1,68 +1,100 @@
|
||||
<template>
|
||||
<div class="feedback-container">
|
||||
<h1>意见反馈</h1>
|
||||
<div class="feedback-form">
|
||||
<el-form :model="feedbackObj" label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="描述问题">
|
||||
<el-input v-model="feedbackObj.describe" :rows="6" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上传图片">
|
||||
<el-upload ref="uploadRef" multiple :limit="3" list-type="picture-card" :http-request="uploadSubmit"
|
||||
:auto-upload="false">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的联系方式">
|
||||
<el-input v-model="feedbackObj.contact" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" size="default" @click="uploadRef.submit()">提交反馈</el-button>
|
||||
</div>
|
||||
<div class="feedback-container">
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
意见反馈
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
:model="feedbackObj"
|
||||
label-width="150px"
|
||||
>
|
||||
<el-form-item label="描述问题">
|
||||
<el-input
|
||||
v-model="feedbackObj.describe"
|
||||
:rows="6"
|
||||
type="textarea"
|
||||
style="width: 95%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传图片">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
multiple
|
||||
:limit="3"
|
||||
list-type="picture-card"
|
||||
:http-request="uploadSubmit"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的联系方式">
|
||||
<el-input v-model="feedbackObj.contact" style="width: 95%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="submit">
|
||||
<el-button color="#f34d2c" plain @click="uploadRef.submit()"
|
||||
>提交反馈</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { uploadFile } from '@/api/upload'; // 引入新的 API 方法
|
||||
import { reactive, ref } from "vue";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { uploadFile } from "@/api/upload"; // 引入新的 API 方法
|
||||
|
||||
const feedbackObj = reactive({
|
||||
describe: '',
|
||||
img: '',
|
||||
contact: '',
|
||||
describe: "",
|
||||
img: "",
|
||||
contact: "",
|
||||
});
|
||||
|
||||
const uploadRef = ref();
|
||||
|
||||
const uploadSubmit = ({ file }) => {
|
||||
const params = {
|
||||
// 可以在这里添加其他参数
|
||||
};
|
||||
uploadFile(file, params)
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
// 处理上传成功的逻辑
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
// 处理上传失败的逻辑
|
||||
});
|
||||
const params = {
|
||||
// 可以在这里添加其他参数
|
||||
};
|
||||
uploadFile(file, params)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
// 处理上传成功的逻辑
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
// 处理上传失败的逻辑
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.feedback-container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
margin: auto;
|
||||
h1 {
|
||||
margin: 30px 0px;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 70px - 150px);
|
||||
background: #eee;
|
||||
padding: 20px;
|
||||
.main {
|
||||
width: 1200px;
|
||||
margin:0 auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
.title{
|
||||
font-size: 24px;
|
||||
padding: 30px 30px 60px 30px;
|
||||
}
|
||||
|
||||
.submit{
|
||||
padding: 50px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div class="help_container">
|
||||
<el-row>
|
||||
<div class="main">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<div class="help_img">
|
||||
<img src="../../assets/image/help/help_temp.png">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -16,11 +18,22 @@
|
||||
<style lang="scss">
|
||||
.help_container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 70px - 150px);
|
||||
background: #eee;
|
||||
padding: 20px;
|
||||
|
||||
.main {
|
||||
width: 1200px;
|
||||
margin:0 auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
min-height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-row{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -32,6 +32,11 @@
|
||||
]
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.banner{
|
||||
padding-top: 20px;
|
||||
}
|
||||
.banner-list{
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,51 +1,92 @@
|
||||
<template>
|
||||
<div class="index-title">
|
||||
<h3>公司简介</h3>
|
||||
<p>我们是一家专注于同城服务的公司，致力于为同城居民提供便捷、高效、优质的服务。我们拥有专业的团队和丰富的经验，为您解决生活中的各种问题。</p>
|
||||
</div>
|
||||
<div class="company-detail">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"> <img
|
||||
src="../../assets/image/index/company.jpg"></el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||||
<div class="company-introduce">
|
||||
<p>小发同城专注于打造本地生活服务平台，我们聚焦同城零售、企业招聘、租赁服务以及二手交易等核心业务，旨在全方位满足您的生活与工作需求。</p>
|
||||
<p>在同城零售领域，小发同城凭借先进的技术手段，成功打通超市数据库，给超市提供实现线上线下商品、价格、库存等信息的实时同步。独特价值在于为消费者提供无缝购物体验，让消费者无论是在线上商城浏览下单，还是在实体超市选购商品，都能享受一致的商品选择、价格体系与库存保障市场定位为本地生活服务的创新引领者，致力于解决传统零售线上线下脱节的痛点。</p>
|
||||
<p>对于企业招聘，我们搭建了高效的人才对接桥梁，精准匹配企业与求职者需求，助力本地企业广纳贤才，推动地方经济发展。</p>
|
||||
<p>在租赁服务方面，涵盖住房、办公场地、设备等多元租赁选项，为您解决生活与经营中的租赁难题。</p>
|
||||
<p>在二手交易板块，则为闲置物品提供了流通渠道，让资源得以循环利用，为环保助力。</p>
|
||||
<router-link :to="{ name: 'about' }" class="router-link-button">了解更多</router-link>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="index-title">
|
||||
<h3>公司简介</h3>
|
||||
</div>
|
||||
<div class="company-detail">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||||
<img src="../../assets/image/index/company.jpg"
|
||||
/></el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||||
<div class="company-introduce">
|
||||
<p>
|
||||
小发同城专注于打造本地生活服务平台，我们聚焦同城零售、企业招聘、租赁服务以及二手交易等核心业务，旨在全方位满足您的生活与工作需求。
|
||||
</p>
|
||||
<p>
|
||||
在同城零售领域，小发同城凭借先进的技术手段，成功打通超市数据库，给超市提供实现线上线下商品、价格、库存等信息的实时同步。独特价值在于为消费者提供无缝购物体验，让消费者无论是在线上商城浏览下单，还是在实体超市选购商品，都能享受一致的商品选择、价格体系与库存保障市场定位为本地生活服务的创新引领者，致力于解决传统零售线上线下脱节的痛点。
|
||||
</p>
|
||||
<p>
|
||||
对于企业招聘，我们搭建了高效的人才对接桥梁，精准匹配企业与求职者需求，助力本地企业广纳贤才，推动地方经济发展。
|
||||
</p>
|
||||
<p>
|
||||
在租赁服务方面，涵盖住房、办公场地、设备等多元租赁选项，为您解决生活与经营中的租赁难题。
|
||||
</p>
|
||||
<p>
|
||||
在二手交易板块，则为闲置物品提供了流通渠道，让资源得以循环利用，为环保助力。
|
||||
</p>
|
||||
<router-link :to="{ name: 'about' }" class="router-link-button"
|
||||
>了解更多</router-link
|
||||
>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
<style lang="scss">
|
||||
.router-link-button {
|
||||
padding: 3px 5px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #42b983;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-top: 25px;
|
||||
float: right;
|
||||
padding: 3px 5px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #ec4b2b;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-top: 25px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.router-link-button:hover {
|
||||
background-color: #36a675;
|
||||
background-color: #f85535;
|
||||
}
|
||||
|
||||
.company-introduce p {
|
||||
font-size: 20px;
|
||||
text-indent: 2em;
|
||||
font-size: 20px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
.index-title {
|
||||
width: 1200px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.company-detail {
|
||||
width: 1200px;
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.index-title {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.company-detail {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
<template>
|
||||
<Slider/>
|
||||
<div class="container">
|
||||
<div class="container-bg">
|
||||
<Company/>
|
||||
<Banner/>
|
||||
<Service/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Slider from './slider.vue';
|
||||
import Banner from './banner.vue';
|
||||
import Service from './service.vue';
|
||||
import Company from './company.vue';
|
||||
</script>
|
||||
<Slider @open-register-form="showRegisterForm = true" />
|
||||
<Company />
|
||||
<Banner />
|
||||
<Service />
|
||||
<Login :isVisible="showLoginForm" @open-register-form="showRegisterForm = true" @close-login-form="showLoginForm = false" />
|
||||
<Register :isVisible="showRegisterForm" @open-login-form="showLoginForm = true" @close-register-form="showRegisterForm = false" />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<script setup lang="ts">
|
||||
|
||||
</style>
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import Slider from "./slider.vue";
|
||||
import Banner from "./banner.vue";
|
||||
import Service from "./service.vue";
|
||||
import Company from "./company.vue";
|
||||
import Register from '@/components/register.vue';
|
||||
|
||||
const showRegisterForm = ref(false);
|
||||
const showLoginForm = ref(false);
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
@ -32,7 +32,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.service-list{
|
||||
width: 1200px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.service-list{
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,118 +1,70 @@
|
||||
<template>
|
||||
<div class="slider">
|
||||
<div class="slider-container">
|
||||
<el-row>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<div class="slider-container-left">
|
||||
<div>
|
||||
<h1>
|
||||
加入小发同城，把握无限商机
|
||||
</h1>
|
||||
<p>JOIN XIAOFA SHOP</p>
|
||||
</div>
|
||||
<div class="slider-button">
|
||||
<el-button type="danger" round size="large">
|
||||
立即入驻
|
||||
</el-button>
|
||||
<el-button type="success" round size="large">
|
||||
Android版本下载
|
||||
</el-button>
|
||||
<!-- <div class="btn slider-btn service">Android版本下载
|
||||
<div class="qr-code">
|
||||
<img src="../../assets/image/down_android.png" alt="Android版本下载">
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="btn slider-btn active-btn">关注抖音号
|
||||
<div class="qr-code">
|
||||
<img src="../../assets/image/down_android.png" alt="抖音二维码">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<div class="slider-container-right">
|
||||
<img src="../../assets/image/xiaofa_logo.png">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="box">
|
||||
<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 class="slider-container-mobile">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl ="24">
|
||||
<div class="mobile-text">
|
||||
<h1>让更多人</h1>
|
||||
<h1>享受本地美好生活</h1>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl ="24">
|
||||
<div class="slider-container-right">
|
||||
<img src="../../assets/image/xiaofa_logo.png">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl ="24">
|
||||
<p>"小发同城在手,本地生活无忧"</p>
|
||||
<div class="slider-button">
|
||||
<div class="btn slider-btn service">APP下载
|
||||
<!-- 二维码容器 -->
|
||||
<div class="qr-code">
|
||||
<img src="../../assets/image/xiaofa_logo.png" alt="APP二维码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn slider-btn active-btn">关注抖音号
|
||||
<!-- 二维码容器 -->
|
||||
<div class="qr-code">
|
||||
<img src="../../assets/image/xiaofa_logo.png" alt="抖音二维码">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="counter_wrapper" data-aos="fade-up">
|
||||
<div class="container">
|
||||
<!-- 使用 el-row 作为行容器 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 第一个统计项 -->
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<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' }" />
|
||||
<el-statistic
|
||||
:value="businessmanValue"
|
||||
:formatter="formatter"
|
||||
:value-style="{ fontSize: '35px' }"
|
||||
/>
|
||||
</h3>
|
||||
<p>商家数量</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 第二个统计项 -->
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<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' }" />
|
||||
<el-statistic
|
||||
:value="productValue"
|
||||
:formatter="formatter2"
|
||||
:value-style="{ fontSize: '35px' }"
|
||||
/>
|
||||
</h3>
|
||||
<p>商品数量</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 第三个统计项 -->
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<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' }" />
|
||||
<el-statistic
|
||||
:value="memberValue"
|
||||
:formatter="formatter"
|
||||
:value-style="{ fontSize: '35px' }"
|
||||
/>
|
||||
</h3>
|
||||
<p>会员数量</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 第四个统计项 -->
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<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' }" />
|
||||
<el-statistic
|
||||
:value="orderValue"
|
||||
:formatter="formatter2"
|
||||
:value-style="{ fontSize: '35px' }"
|
||||
/>
|
||||
</h3>
|
||||
<p>订单数量</p>
|
||||
</div>
|
||||
@ -122,14 +74,27 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useTransition } from '@vueuse/core'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useTransition } from "@vueuse/core";
|
||||
import { ref, onMounted, defineEmits } from "vue";
|
||||
import { Promotion, Download } from "@element-plus/icons-vue";
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const businessman = ref(0);
|
||||
const product = ref(0);
|
||||
const member = ref(0);
|
||||
const order = ref(0);
|
||||
|
||||
const emits = defineEmits(["open-register-form"]);
|
||||
|
||||
const openRegisterForm = () => {
|
||||
console.log(1111);
|
||||
emits("open-register-form");
|
||||
};
|
||||
|
||||
const downAndroid = ()=>{
|
||||
ElMessage.error('敬请期待~')
|
||||
}
|
||||
|
||||
const businessmanValue = useTransition(businessman, {
|
||||
duration: 1500,
|
||||
});
|
||||
@ -156,137 +121,35 @@ const formatter2 = (value: number) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*slider*/
|
||||
<style lang="scss" scoped>
|
||||
.slider {
|
||||
width: 100%;
|
||||
background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
|
||||
-webkit-background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
|
||||
-moz-background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
|
||||
position: relative;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 130px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-position: center center;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slider .slider-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.slider .slider-container .el-row{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.slider .slider-container-mobile {
|
||||
display: none;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.slider .slider-container-mobile h1{
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.slider .slider-container-mobile p {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.slider .slider-container-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.slider .slider-container-left h1 {
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.slider .slider-container-left p {
|
||||
color: rgba(255,255,255,.3);
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
letter-spacing: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.slider .slider-container-right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.slider .slider-container-right img {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.slider-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slider-button .slider-btn {
|
||||
margin-top: 30px;
|
||||
padding: 12px 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider-button .service {
|
||||
margin-right: 14px;
|
||||
}
|
||||
.slider-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: calc(100vh - 200px);
|
||||
background: url("@/assets/image/banner1.jpg") no-repeat 50% 50%;
|
||||
background-size: 100% 100%;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 二维码容器初始样式 */
|
||||
.qr-code {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 30;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.box {
|
||||
width: 1000px;
|
||||
margin: auto;
|
||||
height: calc(100vh - 200px);
|
||||
position: relative;
|
||||
|
||||
/* 鼠标悬停时显示二维码 */
|
||||
.slider-btn:hover .qr-code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qr-code img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
.sub {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
transform: translateY(65%);
|
||||
left: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.counter_wrapper {
|
||||
@ -298,7 +161,7 @@ const formatter2 = (value: number) => {
|
||||
.counter_wrapper .count_box {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
border-radius: 5px 5px 30px 30px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
background: #fff;
|
||||
@ -337,11 +200,10 @@ const formatter2 = (value: number) => {
|
||||
|
||||
.counter_wrapper .count_box:hover .el-statistic__content {
|
||||
color: #ffffff;
|
||||
/* 悬停时数值变为白色 */
|
||||
}
|
||||
|
||||
.counter_wrapper .count_box:hover {
|
||||
background: #7354ff;
|
||||
background: #f34d2c;
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -354,53 +216,39 @@ const formatter2 = (value: number) => {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 小屏幕样式 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.slider{
|
||||
padding-top: 0px;
|
||||
}
|
||||
.container .el-row {
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
.slider-container {
|
||||
background: url("/src/assets/image/banner1.jpg") no-repeat 83.5% 100%;
|
||||
background-size: cover;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
height: calc(100vh - 100px);
|
||||
position: relative;
|
||||
|
||||
.sub {
|
||||
position: absolute;
|
||||
top: 78%;
|
||||
left: 0;
|
||||
transform: translateY(75%);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕隐藏 */
|
||||
.slider .slider-container {
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 小屏幕显示 */
|
||||
.slider .slider-container-mobile {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.slider .slider-container-left p {
|
||||
margin-top: 20px;
|
||||
.counter_wrapper {
|
||||
margin-top: -20px;
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕样式 */
|
||||
@media (min-width: 769px) {
|
||||
|
||||
/* 小屏幕隐藏 */
|
||||
.slider .slider-container-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 大屏幕显示 */
|
||||
.slider .slider-container {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-button{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user