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.
154 lines
2.8 KiB
Vue
154 lines
2.8 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"
|
|
import {
|
|
Login
|
|
} from "@/api"
|
|
import {
|
|
onLoad
|
|
} from "@dcloudio/uni-app"
|
|
const services = ['营销策划', '会议服务', '商务咨询', '庆典服务', '礼仪服务']
|
|
|
|
const gotoAbout = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/about'
|
|
})
|
|
}
|
|
const handleLogin = async () => {
|
|
try {
|
|
// 1. 调用微信登录接口获取 code
|
|
const res = await wx.login()
|
|
if (res.code) {
|
|
// 2. 将 code 发送给后端
|
|
console.log(res.code)
|
|
Login({
|
|
code: res.code
|
|
}).then(res => {
|
|
if (res.status) {
|
|
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: #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> |