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.
189 lines
3.7 KiB
Vue
189 lines
3.7 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- Hero 区域 -->
|
|
<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="contact-section">
|
|
<button class="contact-btn" @click="lianxi">联系我们</button>
|
|
</view>
|
|
|
|
<!-- 页脚 -->
|
|
<view class="footer">
|
|
<text>© 2025 秦皇岛安尔然营销策划有限公司</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue"
|
|
import { Login } from "@/api"
|
|
import { onLoad } from "@dcloudio/uni-app"
|
|
|
|
const services = ['营销策划', '会议服务', '商务咨询', '庆典服务', '礼仪服务']
|
|
|
|
const gotoAbout = () => {
|
|
uni.navigateTo({ url: '/pages/about' })
|
|
}
|
|
|
|
const lianxi = () => {
|
|
uni.navigateTo({ url: '/pages/contact' })
|
|
}
|
|
|
|
const handleLogin = async () => {
|
|
try {
|
|
const res = await wx.login()
|
|
if (res.code) {
|
|
|
|
Login({ code: res.code }).then(res => {
|
|
if(res.status){
|
|
uni.setStorageSync("openid",res.data.openid)
|
|
if ( res.data.member !== null && res.data.url !== null) {
|
|
uni.navigateTo({ url: '/pages/h5?url=' + res.data.url })
|
|
}
|
|
}
|
|
|
|
})
|
|
} else {
|
|
console.error('登录失败', res.errMsg)
|
|
}
|
|
} catch (error) {
|
|
console.error('登录异常', error)
|
|
}
|
|
}
|
|
|
|
onLoad(() => {
|
|
handleLogin()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20rpx;
|
|
background: #f9fafb;
|
|
box-sizing: border-box;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 80rpx 40rpx;
|
|
background: linear-gradient(135deg, #1e40af, #3182ce);
|
|
color: white;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 50rpx;
|
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.logo {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
margin-bottom: 30rpx;
|
|
border-radius: 50%;
|
|
background: white;
|
|
padding: 12rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin: 20rpx 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 32rpx;
|
|
opacity: 0.95;
|
|
display: block;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.btn {
|
|
background: #ffffff;
|
|
color: #1e40af;
|
|
border: none;
|
|
padding: 18rpx 60rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
|
transition: transform 0.2s;
|
|
}
|
|
.btn:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 24rpx;
|
|
color: #1e293b;
|
|
display: block;
|
|
}
|
|
|
|
.service-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.service-item {
|
|
background: #ffffff;
|
|
padding: 24rpx 40rpx;
|
|
border-radius: 18rpx;
|
|
font-size: 28rpx;
|
|
color: #1e293b;
|
|
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
min-width: 180rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 联系我们模块 */
|
|
.contact-section {
|
|
text-align: center;
|
|
margin: 50rpx 0;
|
|
}
|
|
|
|
.contact-btn {
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
|
color: white;
|
|
border: none;
|
|
padding: 20rpx 70rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
box-shadow: 0 6rpx 16rpx rgba(59, 130, 246, 0.4);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.contact-btn:active {
|
|
transform: scale(0.97);
|
|
box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
color: #64748b;
|
|
font-size: 24rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
</style> |