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">
<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">
<p>XIAOFA</p>
<img src="@/assets/image/xiaofa_logo.png" alt="Android版本下载">
</div>
</el-col>
<el-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
@ -64,8 +64,19 @@ const openLicenseImage = () => {
</script>
<style lang="scss">
<style lang="scss" scoped>
.copyright a {
cursor: pointer;
}
.col1{
display: flex;
align-items: center;
justify-content: center;
}
.logo_text{
img{
width: 96px;
border-radius: 100%;
}
}
</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">
<div class="slider-container-left">
<div>
<!-- 大屏幕显示的标题 -->
<h1>
让更多人享受本地美好生活
加入小发同城，把握无限商机
</h1>
<p>"小发同城在手,本地生活无忧"</p>
<p>JOIN XIAOFA SHOP</p>
</div>
<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">
<img src="../../assets/image/xiaofa_logo.png" alt="APP二维码">
<img src="../../assets/image/down_android.png" alt="Android版本下载">
</div>
</div>
<div class="btn slider-btn active-btn">关注抖音号
<!-- 二维码容器 -->
</div> -->
<!-- <div class="btn slider-btn active-btn">关注抖音号
<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>
</el-col>
@ -118,6 +121,40 @@
</div>
</div>
</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">
/*slider*/
@ -183,18 +220,23 @@
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: #fff;
font-size: 20px;
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 {
@ -356,39 +398,9 @@
display: flex;
}
}
</style>
<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>
.slider-button{
display: flex;
align-items: center;
}
</style>