front/website
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 优化页头页脚UI

Browse Source
This commit is contained in:
mixtan 2025-06-06 12:04:18 +08:00
parent 78ce08dbdd
commit 3bb1de8008
3 changed files with 74 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/down_android.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

17
src/views/Footer.vue
View File

@ -3,9 +3,9 @@
<div class="row"> <div class="row">
<el-row> <el-row>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"> <el-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8" class="col1">
<div class="logo_text"> <div class="logo_text">
<p>XIAOFA</p> <img src="@/assets/image/xiaofa_logo.png" alt="Android版本下载">
</div> </div>
</el-col> </el-col>
<el-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8"> <el-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
@ -64,8 +64,19 @@ const openLicenseImage = () => {
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.copyright a { .copyright a {
cursor: pointer; cursor: pointer;
} }
.col1{
display: flex;
align-items: center;
justify-content: center;
}
.logo_text{
img{
width: 96px;
border-radius: 100%;
}
}
</style> </style>

108
src/views/index/slider.vue
View File

@ -5,25 +5,28 @@
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12"> <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
<div class="slider-container-left"> <div class="slider-container-left">
<div> <div>
<!-- 大屏幕显示的标题 -->
<h1> <h1>
让更多人享受本地美好生活 加入小发同城，把握无限商机
</h1> </h1>
<p>"小发同城在手,本地生活无忧"</p> <p>JOIN XIAOFA SHOP</p>
</div> </div>
<div class="slider-button"> <div class="slider-button">
<div class="btn slider-btn service">Android版本下载 <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"> <div class="qr-code">
<img src="../../assets/image/xiaofa_logo.png" alt="APP二维码"> <img src="../../assets/image/down_android.png" alt="Android版本下载">
</div> </div>
</div> </div> -->
<div class="btn slider-btn active-btn">关注抖音号 <!-- <div class="btn slider-btn active-btn">关注抖音号
<!-- 二维码容器 -->
<div class="qr-code"> <div class="qr-code">
<img src="../../assets/image/xiaofa_logo.png" alt="抖音二维码"> <img src="../../assets/image/down_android.png" alt="抖音二维码">
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</el-col> </el-col>
@ -118,6 +121,40 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup>
import { useTransition } from '@vueuse/core'
import { ref, onMounted } from 'vue';
const businessman = ref(0);
const product = ref(0);
const member = ref(0);
const order = ref(0);
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+`;
};
</script>
<style lang="scss"> <style lang="scss">
/*slider*/ /*slider*/
@ -183,18 +220,23 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: 25px;
} }
.slider .slider-container-left h1 { .slider .slider-container-left h1 {
color: #fff; color: #fff;
font-size: 40px; font-size: 40px;
font-weight: 700; font-weight: 700;
font-style: italic;
} }
.slider .slider-container-left p { .slider .slider-container-left p {
color: #fff; color: rgba(255,255,255,.3);
font-size: 20px; font-size: 40px;
font-weight: 400; font-weight: 400;
line-height: 36px;
letter-spacing: 10px;
font-style: italic;
} }
.slider .slider-container-right { .slider .slider-container-right {
@ -356,39 +398,9 @@
display: flex; display: flex;
} }
} }
</style>
<script lang="ts" setup> .slider-button{
import { useTransition } from '@vueuse/core' display: flex;
import { ref, onMounted } from 'vue'; align-items: center;
}
const businessman = ref(0); </style>
const product = ref(0);
const member = ref(0);
const order = ref(0);
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+`;
};
</script>