Skip to content

G
gtp-h5-project
提交 334ff50d 编写于 作者: zhangzhiwei's avatar zhangzhiwei
浏览文件
操作

首页

上级 8cc23ab1
隐藏空白字符变更
内嵌 并排
正在显示 包含 83 行增加 和 265 行删除
components.d.ts
浏览文件 @ 334ff50d
......@@ -10,5 +10,7 @@ declare module '@vue/runtime-core' {
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
VanButton: typeof import('vant/es')['Button']
VanField: typeof import('vant/es')['Field']
VanForm: typeof import('vant/es')['Form']
}
}
src/App.vue
浏览文件 @ 334ff50d
......@@ -5,7 +5,5 @@
</template>
<style scoped lang="scss">
.btn {
font-size: 24px;
}
</style>
src/api/index.ts
浏览文件 @ 334ff50d
......@@ -3,8 +3,8 @@ import { server } from '@/utils/axios'
// 测试用例
export function serverAxios(val: { keywords: string }) {
return server<{ hasMore: boolean; songCount: number; songs: unknown[] }>(
'search',
'GET',
'/api/scene/list',
'POST',
{ ...val }
)
}
src/main.ts
浏览文件 @ 334ff50d
......@@ -3,13 +3,11 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import 'normalize.css'
import '@/assets/styles/common.scss'
import 'vant/es/toast/style'
const app = createApp(App)
app.use(createPinia())
app.use(router)
......
src/router/index.ts
浏览文件 @ 334ff50d
......@@ -3,23 +3,15 @@ import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: '/volunteer'
redirect: '/Login'
},
{
path: '/volunteer',
path: '/Login',
meta: { title: '首页' },
component: () =>
import(/* webpackChunkName: "Home" */ '@/views/homePage/home-page.vue')
import(/* webpackChunkName: "Home" */ '@/views/Login.vue')
},
{
path: '/404',
meta: { title: '404' },
component: () => import(/* webpackChunkName: "404" */ '../views/404.vue')
},
{
path: '/:pathMatch(.*)',
redirect: '/404'
}
]
const router = createRouter({
......
src/utils/axios/index.ts
浏览文件 @ 334ff50d
......@@ -19,7 +19,7 @@ const URL = import.meta.env.VITE_APP_API_SERVER
export const baseURL = (URL as string) + baseApi
const axiosInstance = axios.create({
baseURL: baseApi + ''
baseURL: '/api'
})
axiosInstance.interceptors.response.use(
......
src/views/404.vue 已删除 100644 → 0
浏览文件 @ 8cc23ab1
<template>
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" :src="four" alt="404" />
<img class="pic-404__child left" :src="four_cloud" alt="404" />
<img class="pic-404__child mid" :src="four_cloud" alt="404" />
<img class="pic-404__child right" :src="four_cloud" alt="404" />
</div>
<div class="bullshit">
<div class="bullshit__oops">页面不存在!</div>
<div class="bullshit__info">
请检查您输入的网址是否正确，或单击下面的按钮返回主页
</div>
<van-button @click="go" type="primary" round>跳转首页</van-button>
</div>
</div>
</template>
<script lang="ts" setup>
import four from '@/images/404.png'
import four_cloud from '@/images/404_cloud.png'
const router = useRouter()
const go = () => {
router.push('/')
}
</script>
<style lang="scss" scoped>
.wscn-http404 {
position: relative;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 85%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
width: 190px;
padding: 30px 0;
overflow: hidden;
margin: 0 auto;
text-align: center;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #222;
font-weight: bold;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>
src/views/Login.vue 0 → 100644
浏览文件 @ 334ff50d
<template>
<div class="login">
<div class="logo">
<img src="@/images/login_logo.png" alt="">
<p class="text">EDSGPT</p>
</div>
<van-form>
<van-field
v-model="params.username"
name="账号"
label="账号"
placeholder="请输入您的账号"
/>
<van-field
v-model="params.password"
type="password"
name="密码"
label="密码"
placeholder="请输入您的密码"
/>
<div style="margin: 66px 20px">
<van-button block @click="handleBtn" style="background: #4ab7a2;color: #ffffff">登 录</van-button>
</div>
</van-form>
</div>
</template>
<script setup lang="ts">
import { Toast } from 'vant'
import { serverAxios } from '@/api'
const params = ref({
username: '',
password: ''
})
const handleBtn = () => {
Toast({
message: '点击了我'
})
}
onMounted(async () => {
const res = await serverAxios()
console.log(res.code)
})
</script>
<style scoped lang="scss">
.van-cell {
background: none;
}
.login {
width: 100%;
height: 100%;
background-image: url("../images/login_bg.png");
background-size: cover;
background-position: center;
min-height: 100vh;
.logo {
padding-top: 25%;
margin-bottom: 20%;
text-align: center;
.text {
height: 32px;
font-size: 20px;
font-family: OPPOSans;
font-weight: 800;
color: #05362A;
}
}
}
</style>
src/views/homePage/home-page.vue 已删除 100644 → 0
浏览文件 @ 8cc23ab1
<template>
<van-button type="primary" size="large" @click="handleBtn">按钮</van-button>
</template>
<script setup lang="ts">
import { Toast } from 'vant'
import { serverAxios } from '@/api'
const test = ref('测试')
const reult = ref<any[]>([])
const handleBtn = () => {
Toast({
message: '点击了我'
})
}
onMounted(async () => {
const res = await serverAxios({ keywords: '海阔天空' })
console.log(res.code)
reult.value = res.result.songs
})
</script>
<style scoped lang="scss">
.test {
font-size: 20px;
}
</style>
vite.config.ts
浏览文件 @ 334ff50d
......@@ -36,7 +36,7 @@ export default defineConfig(({ mode }: ConfigEnv) => {
cors: true,
proxy: {
'/api': {
target: env.VITE_APP_API_SERVER,
target: 'https://ehomestore-test.edsmall.com',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, '')
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或