Browse Source

登陆页面+初始封面

lihuilin/feature-20250718094329-25周年庆后台
wangxiangwen4 1 month ago
parent
commit
30c10485a1
  1. BIN
      activitylink/src/img/1.jpg
  2. 5
      activitylink/src/router/index.js
  3. 105
      activitylink/src/views/homePage.vue
  4. 6
      activitylink/src/views/zhongchou/activity/index.vue
  5. 6
      activitylink/src/views/zhongchou/gift/index.vue
  6. 20
      activitylink/src/views/zhongchou/index.vue
  7. 24
      activitylink/src/views/zhongchou/level/index.vue
  8. 35
      activitylink/src/views/zhongchou/mainImg/DefaultImage.vue

BIN
activitylink/src/img/1.jpg

After

Width: 5244  |  Height: 2950  |  Size: 2.1 MiB

5
activitylink/src/router/index.js

@ -61,6 +61,11 @@ const routes = [
path: 'activityManagement/set', // 注意这里不要加斜杠,表示相对路径 path: 'activityManagement/set', // 注意这里不要加斜杠,表示相对路径
name: 'activitySet', name: 'activitySet',
component: () => import('../views/zhongchou/activity/set/index.vue'), component: () => import('../views/zhongchou/activity/set/index.vue'),
},
{
path: 'mainimg', // 注意这里不要加斜杠,表示相对路径
name: 'mainImg',
component: () => import('../views/zhongchou/mainImg/DefaultImage.vue'),
} }
] ]
} }

105
activitylink/src/views/homePage.vue

@ -1,17 +1,108 @@
<template> <template>
<div>
<button @click="router.push('/choujiang')">抽奖</button>
<button @click="router.push('/zhongchou')">众筹</button>
<div class="login-container">
<div class="login-box">
<h2>登录</h2>
<form @submit.prevent="login">
<div class="input-group">
<label for="username">用户名</label>
<input type="text" id="username" v-model="username" required>
</div>
<div class="input-group">
<label for="password">密码</label>
<input type="password" id="password" v-model="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
const router = useRouter(); const router = useRouter();
const username = ref("");
const password = ref("");
const login = () => {
//
if (username.value=='homily' && password.value=='27zn') {
//
ElMessage({
message: '登陆成功,欢迎您使用本系统',
type: 'success',
})
router.push("/zhongchou/mainimg");
}else {
ElMessage({
message: '请输入正确的用户名和密码',
type: 'error',
})
}
};
</script> </script>
<style scoped> <style scoped>
.login-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('@/img/1.jpg') no-repeat center center fixed;
background-size: cover;
background-position: center;
z-index: 0;
/* 使用 Flexbox 布局 */
display: flex;
justify-content: center;
align-items: center;
}
.login-box {
background-color: rgba(255, 255, 255, 0.9);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
z-index: 1; /* 提高 z-index 确保覆盖背景 */
}
h2 {
text-align: center;
margin-bottom: 1.5rem;
}
.input-group {
margin-bottom: 1rem;
}
.input-group label {
display: block;
margin-bottom: 0.5rem;
}
.input-group input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 0.75rem;
border: none;
border-radius: 4px;
background-color: #42b983;
color: white;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #369d6e;
}
</style> </style>

6
activitylink/src/views/zhongchou/activity/index.vue

@ -8,7 +8,7 @@
<div class="gray-container"> <div class="gray-container">
<div class="activity-header"> <div class="activity-header">
<div class="header-text">活动设置</div> <div class="header-text">活动设置</div>
<el-button type="primary" @click="centerDialogVisible = true">添加活动</el-button>
<el-button type="primary" @click="addActivityShow">添加活动</el-button>
</div> </div>
<!-- 其他内容区域 --> <!-- 其他内容区域 -->
<div class="content-area"> <div class="content-area">
@ -137,6 +137,10 @@ const cancel = () => {
status: '' status: ''
} }
} }
const addActivityShow = () => {
centerDialogVisible.value = true
}
// //
const addActivity = () => { const addActivity = () => {
centerDialogVisible.value = false centerDialogVisible.value = false

6
activitylink/src/views/zhongchou/gift/index.vue

@ -29,9 +29,9 @@
<el-table-column prop="level" label="等级" width="200" align="center"></el-table-column> <el-table-column prop="level" label="等级" width="200" align="center"></el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button size="big" @click="goToimportFixedList(scope.row)">导入内定名单</el-button>
<el-button size="big" @click="editGift(scope.row)">编辑</el-button>
<el-button size="big" type="danger" @click="deleteGift(scope.row)">删除</el-button>
<el-button size="default" @click="goToimportFixedList(scope.row)">导入内定名单</el-button>
<el-button size="default" @click="editGift(scope.row)">编辑</el-button>
<el-button size="default" type="danger" @click="deleteGift(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

20
activitylink/src/views/zhongchou/index.vue

@ -1,17 +1,3 @@
<!-- <template>
<div>
<el-button type="primary">众筹</el-button>
</div>
</template>
<script setup>
</script>
<style scoped>
</style> -->
<script setup> <script setup>
import { import {
@ -44,6 +30,10 @@ const goToWinning = () => {
const goToActivity = () => { const goToActivity = () => {
router.push({ name: 'zhongchouactivity' }) router.push({ name: 'zhongchouactivity' })
} }
const goTomainImg = () => {
router.push({ name: 'mainImg' })
}
</script> </script>
<template> <template>
@ -62,7 +52,7 @@ const goToActivity = () => {
style="height: 100%;" style="height: 100%;"
router router
> >
<el-menu-item index="/zhongchou">
<el-menu-item @click="goTomainImg">
<el-icon><Promotion /></el-icon> <el-icon><Promotion /></el-icon>
<span>后台管理系统</span> <span>后台管理系统</span>
</el-menu-item> </el-menu-item>

24
activitylink/src/views/zhongchou/level/index.vue

@ -2,7 +2,7 @@
<el-card style="margin-top:50px ; min-height: 90vh; max-height: 90vh;"> <el-card style="margin-top:50px ; min-height: 90vh; max-height: 90vh;">
<div class="gray-container"> <div class="gray-container">
<h2>等级管理</h2> <h2>等级管理</h2>
<el-button type="primary" @click="showAdd = true">添加等级</el-button>
<el-button type="primary" @click="addShow">添加等级</el-button>
<div class="table-container" style="flex: 1; overflow-y: auto;"> <div class="table-container" style="flex: 1; overflow-y: auto;">
<el-table :data="currentPageData" style="width: 100%" :row-style="{ height: '55px' }"> <el-table :data="currentPageData" style="width: 100%" :row-style="{ height: '55px' }">
<el-table-column type="index" label="ID" width="150" align="center"/> <el-table-column type="index" label="ID" width="150" align="center"/>
@ -17,7 +17,7 @@
<el-button type="primary" text @click="editInit(scope.row)">编辑</el-button> <el-button type="primary" text @click="editInit(scope.row)">编辑</el-button>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<el-button type="primary" text @click="showSet = true">设置多个</el-button>
<el-button type="primary" text @click="SetShow">设置多个</el-button>
<el-popconfirm title="确定将此用户删除吗?"> <el-popconfirm title="确定将此用户删除吗?">
<template #reference> <template #reference>
<el-button type="danger" text>删除</el-button> <el-button type="danger" text>删除</el-button>
@ -48,11 +48,11 @@
</el-pagination> </el-pagination>
</el-card> </el-card>
<el-dialog v-model="showAdd" :rules="rules" style="width:600px" align-center>
<el-dialog v-model="showAdd" style="width:600px" align-center>
<el-header> <el-header>
<h2>添加等级</h2> <h2>添加等级</h2>
</el-header> </el-header>
<el-form :model="addObj" :rules="rules" ref="addForm">
<el-form :model="addObj" ref="addForm">
<div class="marginTop"> <div class="marginTop">
<span style="width: 100px; display: inline-block; text-align: right;">等级名称</span><el-input <span style="width: 100px; display: inline-block; text-align: right;">等级名称</span><el-input
v-model="addObj.gradeName" placeholder="请输入" style="width:200px"></el-input> v-model="addObj.gradeName" placeholder="请输入" style="width:200px"></el-input>
@ -80,11 +80,11 @@
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="showEdit" :rules="rules" style="width:600px" align-center>
<el-dialog v-model="showEdit" style="width:600px" align-center>
<el-header> <el-header>
<h2>编辑等级</h2> <h2>编辑等级</h2>
</el-header> </el-header>
<el-form :model="editObj" :rules="rules" ref="addForm">
<el-form :model="editObj" ref="addForm">
<div class="marginTop"> <div class="marginTop">
<span style="width: 100px; display: inline-block; text-align: right;">等级名称</span><el-input <span style="width: 100px; display: inline-block; text-align: right;">等级名称</span><el-input
v-model="editObj.gradeName" placeholder="请输入" style="width:200px"></el-input> v-model="editObj.gradeName" placeholder="请输入" style="width:200px"></el-input>
@ -112,11 +112,11 @@
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="showSet" :rules="rules" style="width:600px" align-center>
<el-dialog v-model="showSet" style="width:600px" align-center>
<el-header> <el-header>
<h2>设置多个</h2> <h2>设置多个</h2>
</el-header> </el-header>
<el-form :model="setObj" :rules="rules" ref="addForm">
<el-form :model="setObj" ref="addForm">
<div class="marginTop"> <div class="marginTop">
<span style="width: 100px; display: inline-block; text-align: right;">等级名称</span><el-input <span style="width: 100px; display: inline-block; text-align: right;">等级名称</span><el-input
v-model="setObj.gradeName" placeholder="请输入" style="width:200px"></el-input> v-model="setObj.gradeName" placeholder="请输入" style="width:200px"></el-input>
@ -149,6 +149,14 @@ import { ref,computed ,reactive, watch, onMounted } from 'vue'
const showAdd = ref(false) const showAdd = ref(false)
const showEdit = ref(false) const showEdit = ref(false)
const showSet = ref(false) const showSet = ref(false)
const addShow = () => {
showAdd.value = true
}
const SetShow = () => {
showSet.value = true
}
const addObj = ref({ const addObj = ref({
gradeName: '', gradeName: '',
num: 0, num: 0,

35
activitylink/src/views/zhongchou/mainImg/DefaultImage.vue

@ -0,0 +1,35 @@
<template>
<div class="default-image-container">
<div class="default-image"></div>
</div>
</template>
<script setup>
//
</script>
<style scoped>
.default-image-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: -1; /* 放在其他内容之后 */
}
.default-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('@/img/1.jpg') no-repeat center center fixed;
background-size: cover;
background-position: center;
z-index: -1;
}
</style>
Loading…
Cancel
Save