feat: 添加移动端页面组件和图片资源
This commit is contained in:
wangqiao
@ -1,75 +1,197 @@
|
||||
<template>
|
||||
<div class="mobile-page">
|
||||
<h1 class="page-title">移动端页面</h1>
|
||||
<div class="test-content">
|
||||
<p>这是一个测试页面，用于验证移动端样式重置是否生效。</p>
|
||||
<div class="test-box">
|
||||
<p>测试盒子 - 宽度应该适应屏幕</p>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button class="el-button el-button--primary">主要按钮</button>
|
||||
<button class="el-button el-button--default">默认按钮</button>
|
||||
<div class="contains content">
|
||||
<!-- Search Bar -->
|
||||
<SearchBar />
|
||||
|
||||
<!-- Banner Section -->
|
||||
<div class="banner-section">
|
||||
<div class="banner-swiper">
|
||||
<div class="banner-content">
|
||||
<img src="~/assets/images/banner.png" alt="banner" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Grid -->
|
||||
<div class="category-grid">
|
||||
<!-- First Row -->
|
||||
<div class="category-row">
|
||||
<div class="category-item" @click="navigateTo('图纸')">
|
||||
<div class="category-icon yellow">
|
||||
<span class="icon">✍️</span>
|
||||
</div>
|
||||
<span class="category-text">图纸</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" @click="navigateTo('文本')">
|
||||
<div class="category-icon blue">
|
||||
<span class="icon">📄</span>
|
||||
</div>
|
||||
<span class="category-text">文本</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" @click="navigateTo('模型')">
|
||||
<div class="category-icon orange">
|
||||
<span class="icon">📦</span>
|
||||
</div>
|
||||
<span class="category-text">模型</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" @click="navigateTo('community')">
|
||||
<div class="category-icon green">
|
||||
<span class="icon">💬</span>
|
||||
</div>
|
||||
<span class="category-text">牛人社区</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Row -->
|
||||
<div class="category-row">
|
||||
<div class="category-item" @click="navigateTo('international')">
|
||||
<div class="category-icon purple">
|
||||
<span class="icon">🌐</span>
|
||||
</div>
|
||||
<span class="category-text">国外专区</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item" @click="navigateTo('channel')">
|
||||
<div class="category-icon cyan">
|
||||
<span class="icon">💬</span>
|
||||
</div>
|
||||
<span class="category-text">交流频道</span>
|
||||
</div>
|
||||
|
||||
<div class="category-item"></div>
|
||||
<div class="category-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="bg-white"></div>
|
||||
<div class="contains content">
|
||||
<!--最新活动 -->
|
||||
<ActivityBanner />
|
||||
</div>
|
||||
<div class="bg-white"></div>
|
||||
<div class="contains content">
|
||||
<!-- 推荐功能 -->
|
||||
<RecommendBanner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'm'
|
||||
})
|
||||
// Mobile specific logic can be added here
|
||||
definePageMeta({ layout: 'm' })
|
||||
import SearchBar from "~/components/m/home-components/SearchBar.vue";
|
||||
import ActivityBanner from "~/components/m/home-components/ActivityBanner.vue";
|
||||
import RecommendBanner from "~/components/m/home-components/RecommendBanner.vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function navigateTo(category: string) {
|
||||
router.push({ path: '/mobile/gloabal-cad-drawings', query: { titleName: encodeURIComponent(category) } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-page {
|
||||
padding: 16px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
.banner-section {
|
||||
margin-top: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.test-content {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.test-box {
|
||||
.banner-swiper {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #e8f4fd;
|
||||
border: 1px solid #b3d8ff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 16px 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
height: 100%;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
.slogan-main {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.slogan-sub {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
background-color: rgba(109, 200, 255, 0.8);
|
||||
align-self: flex-start;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.banner-graphics {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.category-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #ffd770;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #70a1ff;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #ff9f43;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7bed9f;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #a3a1ff;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #55e6c1;
|
||||
}
|
||||
|
||||
.category-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user