You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.2 KiB
Vue
108 lines
2.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="hero">
|
|
<image src="/static/logo.png" class="logo" mode="aspectFit" />
|
|
<text class="title">秦皇岛安尔然营销策划有限公司</text>
|
|
<text class="subtitle">为您提供专业的营销策划服务</text>
|
|
<button class="btn" @click="gotoAbout">了解更多</button>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<text class="section-title">我们的服务</text>
|
|
<view class="service-list">
|
|
<view class="service-item" v-for="(item, index) in services" :key="index">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer">
|
|
<text>秦皇岛安尔然营销策划有限公司</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from "vue"
|
|
const services = ['营销策划', '会议服务', '商务咨询', '庆典服务', '礼仪服务']
|
|
|
|
const gotoAbout = () => {
|
|
uni.navigateTo({ url: '/pages/about' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
box-sizing: border-box; /* 关键！ */
|
|
|
|
height: 100vh;
|
|
}
|
|
.hero {
|
|
text-align: center;
|
|
padding: 80rpx 40rpx;
|
|
background: linear-gradient(to bottom, #1a365d, #2c5282);
|
|
color: white;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.logo {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
margin-bottom: 30rpx;
|
|
border-radius: 50%;
|
|
background: white;
|
|
padding: 10rpx;
|
|
}
|
|
.title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin: 20rpx 0;
|
|
}
|
|
.subtitle {
|
|
font-size: 32rpx;
|
|
opacity: 0.9;
|
|
display: block;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.btn {
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
padding: 16rpx 60rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
.section-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 20rpx;
|
|
display: block;
|
|
}
|
|
.service-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
.service-item {
|
|
background: #f1f5f9;
|
|
padding: 20rpx 55rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 28rpx;
|
|
color: #1e293b;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 60rpx;
|
|
color: #94a3b8;
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
bottom: 60rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
</style> |