Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
0a1abe64 by zhangmeng
Options

空格

1 parent 11925936
Expand all
Inline Side-by-side
Showing 6 changed files with 295 additions and 139 deletions
src/layoutPc/components/AppBottom.vue
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 </el-col> 24 </el-col>
25 <el-col :span="24" style="border-top: 1px solid #d0d0d0"> 25 <el-col :span="24" style="border-top: 1px solid #d0d0d0">
26 <div class="text-center copyright pd10">版权所有@无锡和畅赛事运营有限公司 26 <div class="text-center copyright pd10">版权所有@无锡和畅赛事运营有限公司
27 &ensp;&ensp 27 &nbsp;&nbsp
28 <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a></div> 28 <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号：苏ICP备2023054420号-2</a></div>
29 </el-col> 29 </el-col>
30 </el-row> 30 </el-row>
...@@ -88,20 +88,20 @@ ...@@ -88,20 +88,20 @@
88 </div> 88 </div>
89 </div> 89 </div>
90 90
91 <a v-show="false" ref="aRef" :href="fillImgUrl(file[0]?.url)" target="_blank" /> 91 <a v-show="false" ref="aRef" :href="fillImgUrl(file[0]?.url)" target="_blank"/>
92 </div> 92 </div>
93 </template> 93 </template>
94 94
95 <script setup> 95 <script setup>
96 import { useStorage } from '@vueuse/core/index' 96 import {useStorage} from '@vueuse/core/index'
97 import { useRouter } from 'vue-router' 97 import {useRouter} from 'vue-router'
98 import { ElMessage } from 'element-plus' 98 import {ElMessage} from 'element-plus'
99 import { getCurrentInstance, ref } from '@vue/runtime-core' 99 import {getCurrentInstance, ref} from '@vue/runtime-core'
100 100
101 import { getMatchById, getppInfo, getZNList } from '@/apiPc/match' 101 import {getMatchById, getppInfo, getZNList} from '@/apiPc/match'
102 import { fillImgUrl } from '/@/utils/ruoyi' 102 import {fillImgUrl} from '/@/utils/ruoyi'
103 103
104 const { proxy } = getCurrentInstance() 104 const {proxy} = getCurrentInstance()
105 const router = useRouter() 105 const router = useRouter()
106 const language = useStorage('language', 0) 106 const language = useStorage('language', 0)
107 const goHelp = () => { 107 const goHelp = () => {
...@@ -115,7 +115,7 @@ const goHelp = () => { ...@@ -115,7 +115,7 @@ const goHelp = () => {
115 115
116 116
117 const file = ref({}) 117 const file = ref({})
118 const goHelpZH = async() => { 118 const goHelpZH = async () => {
119 // ElMessage.success('已下载文件') 119 // ElMessage.success('已下载文件')
120 // router.push({ 120 // router.push({
121 // name: 'guide', 121 // name: 'guide',
...@@ -123,7 +123,7 @@ const goHelpZH = async() => { ...@@ -123,7 +123,7 @@ const goHelpZH = async() => {
123 // index: 8 123 // index: 8
124 // } 124 // }
125 // }) 125 // })
126 const res = await getZNList({ sortId: 30000009, language: 1 }) 126 const res = await getZNList({sortId: 30000009, language: 1})
127 if (res.rows.length > 0) { 127 if (res.rows.length > 0) {
128 file.value = JSON.parse(res.rows[0].picUrl) 128 file.value = JSON.parse(res.rows[0].picUrl)
129 proxy.$refs['aRef'].click() 129 proxy.$refs['aRef'].click()
......
src/views/system/user/profile/index.vue
...@@ -4,40 +4,40 @@ ...@@ -4,40 +4,40 @@
4 <el-col :span="6" :xs="24" class="colHight"> 4 <el-col :span="6" :xs="24" class="colHight">
5 <div> 5 <div>
6 <div class="avatarBox"> 6 <div class="avatarBox">
7 <userAvatar :user="state.user" /> 7 <userAvatar :user="state.user"/>
8 <h3 class="">{{ state.user.userName }}</h3> 8 <h3 class="">{{ state.user.userName }}</h3>
9 </div> 9 </div>
10 10
11 <div> 11 <div>
12 <ul class="list-group list-group-striped"> 12 <ul class="list-group list-group-striped">
13 <li 13 <li
14 class="list-group-item"
15 :class="{ btn: index == 1 }" 14 :class="{ btn: index == 1 }"
15 class="list-group-item"
16 @click="index = 1" 16 @click="index = 1"
17 > 17 >
18 <i class="user01" />团体信息&ensp;&ensp;&ensp;&ensp; 18 <i class="user01"/>团体信息&nbsp;&nbsp;&nbsp;&nbsp;
19 </li> 19 </li>
20 <li 20 <li
21 class="list-group-item"
22 :class="{ btn: index == 2 }" 21 :class="{ btn: index == 2 }"
22 class="list-group-item"
23 @click="index = 2" 23 @click="index = 2"
24 > 24 >
25 <i class="user02" />会员认证&ensp;&ensp;&ensp;&ensp; 25 <i class="user02"/>会员认证&nbsp;&nbsp;&nbsp;&nbsp;
26 </li> 26 </li>
27 <li 27 <li
28 v-if="deptType==2||deptType==3" 28 v-if="deptType==2||deptType==3"
29 class="list-group-item"
30 :class="{ btn: index == 3 }" 29 :class="{ btn: index == 3 }"
30 class="list-group-item"
31 @click="index = 3" 31 @click="index = 3"
32 > 32 >
33 <i class="user03" />账户信息&ensp;&ensp;&ensp;&ensp; 33 <i class="user03"/>账户信息&nbsp;&nbsp;&nbsp;&nbsp;
34 </li> 34 </li>
35 <li 35 <li
36 class="list-group-item"
37 :class="{ btn: index == 4 }" 36 :class="{ btn: index == 4 }"
37 class="list-group-item"
38 @click="index = 4" 38 @click="index = 4"
39 > 39 >
40 <i class="user04" />账号与安全&ensp;&ensp; 40 <i class="user04"/>账号与安全&nbsp;&nbsp;
41 </li> 41 </li>
42 <!-- <li class="list-group-item"> 42 <!-- <li class="list-group-item">
43 <svg-icon icon-class="peoples" /> 43 <svg-icon icon-class="peoples" />
...@@ -60,21 +60,21 @@ ...@@ -60,21 +60,21 @@
60 </div> 60 </div>
61 </template> --> 61 </template> -->
62 <div v-if="index == 1"> 62 <div v-if="index == 1">
63 <Group /> 63 <Group/>
64 </div> 64 </div>
65 <div v-if="index == 2"> 65 <div v-if="index == 2">
66 <Member :id="id" /> 66 <Member :id="id"/>
67 </div> 67 </div>
68 <div v-if="index == 3"> 68 <div v-if="index == 3">
69 <Rates /> 69 <Rates/>
70 </div> 70 </div>
71 <div v-if="index == 4"> 71 <div v-if="index == 4">
72 <el-tabs v-model="activeTab"> 72 <el-tabs v-model="activeTab">
73 <el-tab-pane label="基本资料" name="userinfo"> 73 <el-tab-pane label="基本资料" name="userinfo">
74 <userInfo style="min-height: 454px" :user="state.user" /> 74 <userInfo :user="state.user" style="min-height: 454px"/>
75 </el-tab-pane> 75 </el-tab-pane>
76 <el-tab-pane label="修改密码" name="resetPwd"> 76 <el-tab-pane label="修改密码" name="resetPwd">
77 <resetPwd style="min-height: 454px" /> 77 <resetPwd style="min-height: 454px"/>
78 </el-tab-pane> 78 </el-tab-pane>
79 </el-tabs> 79 </el-tabs>
80 </div> 80 </div>
...@@ -83,8 +83,8 @@ ...@@ -83,8 +83,8 @@
83 </div> 83 </div>
84 </template> 84 </template>
85 85
86 <script setup name="Profile"> 86 <script name="Profile" setup>
87 import { ref, reactive, computed, onMounted } from 'vue' 87 import {ref, reactive, computed, onMounted} from 'vue'
88 import UserAvatar from './userAvatar' 88 import UserAvatar from './userAvatar'
89 import UserInfo from './userInfo' 89 import UserInfo from './userInfo'
90 import ResetPwd from './resetPwd' 90 import ResetPwd from './resetPwd'
...@@ -92,8 +92,9 @@ import Group from './group.vue' ...@@ -92,8 +92,9 @@ import Group from './group.vue'
92 import Member from './member.vue' 92 import Member from './member.vue'
93 import Rates from './rates.vue' 93 import Rates from './rates.vue'
94 import useUserStore from '@/store/modules/user' 94 import useUserStore from '@/store/modules/user'
95 import { useRoute } from 'vue-router' 95 import {useRoute} from 'vue-router'
96 import { getUserProfile } from '@/api/system/user' 96 import {getUserProfile} from '@/api/system/user'
97
97 const route = useRoute() 98 const route = useRoute()
98 const deptType = computed(() => useUserStore().deptType) 99 const deptType = computed(() => useUserStore().deptType)
99 const index = ref(1) 100 const index = ref(1)
...@@ -119,29 +120,83 @@ function getUser() { ...@@ -119,29 +120,83 @@ function getUser() {
119 </script> 120 </script>
120 121
121 <style lang="scss" scoped> 122 <style lang="scss" scoped>
122 .user01{background: url("@/assets/admin/user01@2x.png") no-repeat center;background-size: contain;} 123 .user01 {
123 .user02{background: url("@/assets/admin/user02@2x.png") no-repeat center;background-size: contain;} 124 background: url("@/assets/admin/user01@2x.png") no-repeat center;
124 .user03{background: url("@/assets/admin/user03@2x.png") no-repeat center;background-size: contain;} 125 background-size: contain;
125 .user04{background: url("@/assets/admin/user04@2x.png") no-repeat center;background-size: contain;} 126 }
127
128 .user02 {
129 background: url("@/assets/admin/user02@2x.png") no-repeat center;
130 background-size: contain;
131 }
132
133 .user03 {
134 background: url("@/assets/admin/user03@2x.png") no-repeat center;
135 background-size: contain;
136 }
137
138 .user04 {
139 background: url("@/assets/admin/user04@2x.png") no-repeat center;
140 background-size: contain;
141 }
142
126 .list-group-item { 143 .list-group-item {
127 text-align: center;height: 60px;line-height: 60px; 144 text-align: center;
128 background: #FFFFFF;cursor: pointer; 145 height: 60px;
129 font-size: 18px;display: flex;align-items: center;justify-content: center; 146 line-height: 60px;
130 color: #000000;padding: 0;border: none; 147 background: #FFFFFF;
131 border-radius: 5px;margin-bottom: 17px; 148 cursor: pointer;
132 i{display: inline-block;width: 34px;height: 34px;margin-right: 20px;} 149 font-size: 18px;
150 display: flex;
151 align-items: center;
152 justify-content: center;
153 color: #000000;
154 padding: 0;
155 border: none;
156 border-radius: 5px;
157 margin-bottom: 17px;
158
159 i {
160 display: inline-block;
161 width: 34px;
162 height: 34px;
163 margin-right: 20px;
164 }
165
133 &.btn { 166 &.btn {
134 color: #fff;background: #1561CB; 167 color: #fff;
135 .user01{background: url("@/assets/admin/user01_dwn@2x.png") no-repeat center;background-size: contain;} 168 background: #1561CB;
136 .user02{background: url("@/assets/admin/user02_dwn@2x.png") no-repeat center;background-size: contain;} 169
137 .user03{background: url("@/assets/admin/user03_dwn@2x.png") no-repeat center;background-size: contain;} 170 .user01 {
138 .user04{background: url("@/assets/admin/user04_dwn@2x.png") no-repeat center;background-size: contain;} 171 background: url("@/assets/admin/user01_dwn@2x.png") no-repeat center;
172 background-size: contain;
173 }
174
175 .user02 {
176 background: url("@/assets/admin/user02_dwn@2x.png") no-repeat center;
177 background-size: contain;
178 }
179
180 .user03 {
181 background: url("@/assets/admin/user03_dwn@2x.png") no-repeat center;
182 background-size: contain;
183 }
184
185 .user04 {
186 background: url("@/assets/admin/user04_dwn@2x.png") no-repeat center;
187 background-size: contain;
188 }
139 } 189 }
140 } 190 }
191
141 .colHight { 192 .colHight {
142 height: 800px; 193 height: 800px;
143 } 194 }
144 .avatarBox{background: url("@/assets/admin/user_bg@2x.png") no-repeat center;background-size: cover; 195
145 text-align: center;padding: 30px 0 10px; 196 .avatarBox {
197 background: url("@/assets/admin/user_bg@2x.png") no-repeat center;
198 background-size: cover;
199 text-align: center;
200 padding: 30px 0 10px;
146 } 201 }
147 </style> 202 </style>
......
src/viewsPc/auth/components/query/person.vue
...@@ -4,21 +4,30 @@ ...@@ -4,21 +4,30 @@
4 <el-row> 4 <el-row>
5 <el-col v-for="(d,i) in listData" :key="i" :lg="24" :sm="24"> 5 <el-col v-for="(d,i) in listData" :key="i" :lg="24" :sm="24">
6 <div class="person-item"> 6 <div class="person-item">
7 <img v-if="d.photo" class="photo" :src="fillImgUrl(d.photo)"> 7 <img v-if="d.photo" :src="fillImgUrl(d.photo)" class="photo">
8 <img v-else class="photo" style="object-fit: contain;background: #fff;" src="@/assets/v1/default.png"> 8 <img v-else class="photo" src="@/assets/v1/default.png" style="object-fit: contain;background: #fff;">
9 <div class="info"> 9 <div class="info">
10 <div class="name">{{ d.name }} 10 <div class="name">{{ d.name }}
11 <el-image v-if="d.sex=='0'||d.sex=='1'" style="width: 20px;height: 20px;margin-left: 10px" :src="d.sex=='0'?male:female" /> 11 <el-image
12 v-if="d.sex=='0'||d.sex=='1'" :src="d.sex=='0'?male:female"
13 style="width: 20px;height: 20px;margin-left: 10px"
14 />
12 </div> 15 </div>
13 <div class="flex"> 16 <div class="flex">
14 <div> 17 <div>
15 <el-form-item label="会员编号：">{{ d.perCode }}</el-form-item> 18 <el-form-item label="会员编号：">{{ d.perCode }}</el-form-item>
16 <el-form-item label="出生日期：">{{ parseTime(d.birth,'{y}-{m}-{d}') }}</el-form-item> 19 <el-form-item label="出生日期：">{{ parseTime(d.birth, '{y}-{m}-{d}') }}</el-form-item>
17 </div> 20 </div>
18 <div> 21 <div>
19 <el-form-item label="&ensp;&ensp;注册时间：">{{ parseTime(d.createTime,'{y}-{m}-{d}') }}</el-form-item> 22 <el-form-item label="&nbsp;&nbsp;注册时间：">{{
20 <el-form-item label="有效期截止：">{{ parseTime(d.validityDate,'{y}-{m}-{d}')||'--' }}</el-form-item> 23 parseTime(d.createTime, '{y}-{m}-{d}')
21 24 }}
25 </el-form-item>
26 <el-form-item label="有效期截止：">{{
27 parseTime(d.validityDate, '{y}-{m}-{d}') || '--'
28 }}
29 </el-form-item>
30
22 </div> 31 </div>
23 <div style="width: 170px"> 32 <div style="width: 170px">
24 <!-- <div v-if="d.canDownCert=='1'" class="vipDownLoad" @click="vipDownLoad(d.perId)">--> 33 <!-- <div v-if="d.canDownCert=='1'" class="vipDownLoad" @click="vipDownLoad(d.perId)">-->
...@@ -26,7 +35,7 @@ ...@@ -26,7 +35,7 @@
26 <!-- </div>--> 35 <!-- </div>-->
27 </div> 36 </div>
28 </div> 37 </div>
29 38
30 </div> 39 </div>
31 </div> 40 </div>
32 </el-col> 41 </el-col>
...@@ -36,27 +45,31 @@ ...@@ -36,27 +45,31 @@
36 <el-row> 45 <el-row>
37 <el-col v-for="(d,i) in listData" :key="i" :lg="24" :sm="24"> 46 <el-col v-for="(d,i) in listData" :key="i" :lg="24" :sm="24">
38 <div class="person-item"> 47 <div class="person-item">
39 <img v-if="d.photo" class="photo" :src="fillImgUrl(d.photo)"> 48 <img v-if="d.photo" :src="fillImgUrl(d.photo)" class="photo">
40 <img v-else src="@/assets/v1/default.png"> 49 <img v-else src="@/assets/v1/default.png">
41 <div class="info"> 50 <div class="info">
42 <div class="name">{{ d.name }} 51 <div class="name">{{ d.name }}
43 <el-image v-if="d.sex=='0'||d.sex=='1'" style="width: 20px;height: 20px;margin-left: 10px" :src="d.sex=='0'?male:female" /> 52 <el-image
53 v-if="d.sex=='0'||d.sex=='1'" :src="d.sex=='0'?male:female"
54 style="width: 20px;height: 20px;margin-left: 10px"
55 />
44 </div> 56 </div>
45 57
46 <div> 58 <div>
47 <el-form-item label="编号：">{{ d.perCode }}</el-form-item> 59 <el-form-item label="编号：">{{ d.perCode }}</el-form-item>
48 <el-form-item label="出生日期：">{{ parseTime(d.birth,'{y}-{m}-{d}') }}</el-form-item> 60 <el-form-item label="出生日期：">{{ parseTime(d.birth, '{y}-{m}-{d}') }}</el-form-item>
49 <el-form-item label="注册时间：">{{ parseTime(d.createTime,'{y}-{m}-{d}') }}</el-form-item> 61 <el-form-item label="注册时间：">{{ parseTime(d.createTime, '{y}-{m}-{d}') }}</el-form-item>
50 <el-form-item label="有效期截止：">{{ parseTime(d.validityDate,'{y}-{m}-{d}') }}</el-form-item> 62 <el-form-item label="有效期截止：">{{ parseTime(d.validityDate, '{y}-{m}-{d}') }}</el-form-item>
51 </div> 63 </div>
52 <div v-if="d.canDownCert=='1'" class="vipDownLoad" @click="vipDownLoad(d.perId)"> 64 <div v-if="d.canDownCert=='1'" class="vipDownLoad" @click="vipDownLoad(d.perId)">
53 <i />会员证 65 <i />会员证
54 </div> 66 </div>
55 </div> 67 </div>
56 68
57 </div> 69 </div>
58 </el-col> 70 </el-col>
59 </el-row></div> 71 </el-row>
72 </div>
60 <div v-if="!loading" class="text-center pd20"> 73 <div v-if="!loading" class="text-center pd20">
61 <el-divider> 74 <el-divider>
62 <span v-if="showMore" @click="handleQuery">加载更多</span> 75 <span v-if="showMore" @click="handleQuery">加载更多</span>
...@@ -80,22 +93,24 @@ const props = defineProps({ ...@@ -80,22 +93,24 @@ const props = defineProps({
80 query: { 93 query: {
81 required: true, 94 required: true,
82 type: Object, 95 type: Object,
83 default: () => {} 96 default: () => {
97 }
84 } 98 }
85 }) 99 })
86 100
87 const listData = ref([]) 101 const listData = ref([])
88 const showMore = ref(false) 102 const showMore = ref(false)
89 const loading = ref(false) 103 const loading = ref(false)
104
90 function handleQuery() { 105 function handleQuery() {
91 loading.value = true 106 loading.value = true
92 queryParams.pageNum++ 107 queryParams.pageNum++
93 108
94 authentic.query(queryParams).then((res) => { 109 authentic.query(queryParams).then((res) => {
95 _.each(res.data.personalList.rows, (r) => { 110 _.each(res.data.personalList.rows, (r) => {
96 listData.value.push(r) 111 listData.value.push(r)
97 }) 112 })
98 113
99 showMore.value = listData.value.length < res.data.personalList.total 114 showMore.value = listData.value.length < res.data.personalList.total
100 loading.value = false 115 loading.value = false
101 }) 116 })
...@@ -106,6 +121,7 @@ function vipDownLoad(perId) { ...@@ -106,6 +121,7 @@ function vipDownLoad(perId) {
106 } 121 }
107 122
108 let queryParams = {} 123 let queryParams = {}
124
109 function init() { 125 function init() {
110 queryParams = { 126 queryParams = {
111 pageNum: 0, 127 pageNum: 0,
...@@ -114,39 +130,79 @@ function init() { ...@@ -114,39 +130,79 @@ function init() {
114 name: props.query.name 130 name: props.query.name
115 } 131 }
116 listData.value = [] 132 listData.value = []
117 133
118 handleQuery() 134 handleQuery()
119 } 135 }
136
120 defineExpose({ 137 defineExpose({
121 init 138 init
122 }) 139 })
123 </script> 140 </script>
124 141
125 <style scoped lang="scss"> 142 <style lang="scss" scoped>
126 .flex{display: flex;justify-content: space-between;} 143 .flex {
127 .person-item{position:relative; 144 display: flex;
128 display: flex;margin: 30px 0;background: #F5F7F9; 145 justify-content: space-between;
129 border-radius: 2px;padding: 10px 20px; 146 }
130 .photo{width: 100px; height: 130px} 147
131 .info{margin-left: 20px;width: 90%; 148 .person-item {
132 .name{font-size: 24px;display: flex;align-items: center; 149 position: relative;
133 margin: 10px 0;} 150 display: flex;
134 .el-form-item--default{margin-bottom: 0;} 151 margin: 30px 0;
152 background: #F5F7F9;
153 border-radius: 2px;
154 padding: 10px 20px;
155
156 .photo {
157 width: 100px;
158 height: 130px
159 }
160
161 .info {
162 margin-left: 20px;
163 width: 90%;
164
165 .name {
166 font-size: 24px;
167 display: flex;
168 align-items: center;
169 margin: 10px 0;
170 }
171
172 .el-form-item--default {
173 margin-bottom: 0;
135 } 174 }
136 .el-form-item__content{
137 font-size: 18px;
138 color: #95A1A6;}
139 } 175 }
140 @media (max-width: 500px) { 176
141 .forWei{background: #F7F8FA;} 177 .el-form-item__content {
142 .person-item{margin: 15px 0;background: #fff; 178 font-size: 18px;
143 .photo{width: 120px;height: 140px;} 179 color: #95A1A6;
144 .info{margin-left: 15px; 180 }
145 .name{font-size: 18px} 181 }
146 } 182
183 @media (max-width: 500px) {
184 .forWei {
185 background: #F7F8FA;
186 }
187 .person-item {
188 margin: 15px 0;
189 background: #fff;
190
191 .photo {
192 width: 120px;
193 height: 140px;
147 } 194 }
148 :deep(.el-form-item--default .el-form-item__label){ 195
149 padding: 0; 196 .info {
197 margin-left: 15px;
198
199 .name {
200 font-size: 18px
201 }
150 } 202 }
151 } 203 }
204 :deep(.el-form-item--default .el-form-item__label) {
205 padding: 0;
206 }
207 }
152 </style> 208 </style>
......
src/viewsPc/match/components/substation-list.vue
1 <template> 1 <template>
2 <div class="pv20"> 2 <div class="pv20">
3 <div class="matchItem" v-for="n in list" :key="n.id" @click="goDetail(n.id)"> 3 <div v-for="n in list" :key="n.id" class="matchItem" @click="goDetail(n.id)">
4 <el-row :gutter="15"> 4 <el-row :gutter="15">
5 <el-col :lg="7" :md="24" :xl="6"> 5 <el-col :lg="7" :md="24" :xl="6">
6 <div class="popo"> 6 <div class="popo">
7 <el-tag v-if="n.signType==0">{{ language==0?'个人':'Individual' }}</el-tag> 7 <el-tag v-if="n.signType==0">{{ language == 0 ? '个人' : 'Individual' }}</el-tag>
8 <el-tag v-if="n.signType==1">{{ language==0?'团体':'Team' }}</el-tag> 8 <el-tag v-if="n.signType==1">{{ language == 0 ? '团体' : 'Team' }}</el-tag>
9 <el-tag v-if="n.signType==2">{{ language==0?'个人/团体':'Individual/Team' }}</el-tag> 9 <el-tag v-if="n.signType==2">{{ language == 0 ? '个人/团体' : 'Individual/Team' }}</el-tag>
10 </div> 10 </div>
11 <img class="mauto mw100 coverLimitHeight" :src="fillImgUrl(n.coverUrl)"> 11 <img :src="fillImgUrl(n.coverUrl)" class="mauto mw100 coverLimitHeight">
12 </el-col> 12 </el-col>
13 <el-col :lg="9" :md="12" :xl="12"> 13 <el-col :lg="9" :md="12" :xl="12">
14 <div class="info"> 14 <div class="info">
15 <h3 class="esp">{{ n.name }}</h3> 15 <h3 class="esp">{{ n.name }}</h3>
16 <p class="ppl"><label>{{language==0?'赛事级别':'EVENT LEVEL'}}：</label>{{n.level}}</p> 16 <p class="ppl"><label>{{ language == 0 ? '赛事级别' : 'EVENT LEVEL' }}：</label>{{ n.level }}</p>
17 <p class="ppl"><label>{{ language==0?'赛事时间':'COMPETITION DATE' }}：</label>{{n.beginTime?.slice(0,10)}} ~ {{ n.endTime?.slice(0,10) }}</p> 17 <p class="ppl"><label>{{
18 <p class="ppl esp"><label>{{ language==0?'地&ensp;&ensp;&ensp;&ensp;点':'LOCATION' }}：</label>{{ n.address }}</p> 18 language == 0 ? '赛事时间' : 'COMPETITION DATE'
19 <!-- <p class="ppl"><label>{{ language==0?'报名截止':'Registration Deadline' }}：</label>{{ n.signEndTime?.slice(0,10) }}</p>--> 19 }}：</label>{{ n.beginTime?.slice(0, 10) }} ~ {{ n.endTime?.slice(0, 10) }}</p>
20 <p class="ppl" v-if="n.contactPerson"><label>{{ language==0?'联&ensp;系&ensp;人':'CONTACT PERSON' }}：</label>{{ n.contactPerson }}</p> 20 <p class="ppl esp"><label>{{
21 <p class="ppl"><label>{{ language==0?'联系电话':'TEL' }}：</label>086-{{ n.contactTelno }}</p> 21 language == 0 ? '地&nbsp;&nbsp;&nbsp;&nbsp;点' : 'LOCATION'
22 <p class="ppl" v-if="n.contactEmail"><label>{{ language==0?'邮&ensp;&ensp;&ensp;&ensp;箱':'EMAIL' }}：</label>{{ n.contactEmail }}</p> 22 }}：</label>{{ n.address }}</p>
23 23 <!-- <p class="ppl"><label>{{ language==0?'报名截止':'Registration Deadline' }}：</label>{{ n.signEndTime?.slice(0,10) }}</p>-->
24 <p v-if="n.contactPerson" class="ppl"><label>{{
25 language == 0 ? '联&nbsp;系&nbsp;人' : 'CONTACT PERSON'
26 }}：</label>{{ n.contactPerson }}</p>
27 <p class="ppl"><label>{{ language == 0 ? '联系电话' : 'TEL' }}：</label>086-{{ n.contactTelno }}</p>
28 <p v-if="n.contactEmail" class="ppl"><label>{{
29 language == 0 ? '邮&nbsp;&nbsp;&nbsp;&nbsp;箱' : 'EMAIL'
30 }}：</label>{{ n.contactEmail }}</p>
31
24 </div> 32 </div>
25 </el-col> 33 </el-col>
26 <el-col :lg="8" :md="12" :xl="6"> 34 <el-col :lg="8" :md="12" :xl="6">
...@@ -31,41 +39,44 @@ ...@@ -31,41 +39,44 @@
31 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒"> 39 <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
32 <template #default="timeData"> 40 <template #default="timeData">
33 <span class="block">{{ timeData.days }}</span> 41 <span class="block">{{ timeData.days }}</span>
34 <span class="colon">{{ language==0?'天':'Days' }}</span> 42 <span class="colon">{{ language == 0 ? '天' : 'Days' }}</span>
35 <span class="block">{{ timeData.hours }}</span> 43 <span class="block">{{ timeData.hours }}</span>
36 <span class="colon">{{ language==0?'时':'Hrs' }}</span> 44 <span class="colon">{{ language == 0 ? '时' : 'Hrs' }}</span>
37 <span class="block">{{ timeData.minutes }}</span> 45 <span class="block">{{ timeData.minutes }}</span>
38 <span class="colon">{{ language==0?'分':'Min' }}</span> 46 <span class="colon">{{ language == 0 ? '分' : 'Min' }}</span>
39 <span class="block">{{ timeData.seconds }}</span> 47 <span class="block">{{ timeData.seconds }}</span>
40 <span class="colon">{{ language==0?'秒':'Sec' }}</span> 48 <span class="colon">{{ language == 0 ? '秒' : 'Sec' }}</span>
41 </template> 49 </template>
42 </van-count-down> 50 </van-count-down>
43 51
44 <div class="text-center mt30"> 52 <div class="text-center mt30">
45 <a class="btn-lineG mb20 mauto" style="display: block;" v-if="n.time>0"> 53 <a v-if="n.time>0" class="btn-lineG mb20 mauto" style="display: block;">
46 <span v-if="n.time>0 && n.startSign<=0"> {{ language==0?'我要报名':'REGISTER' }}</span> 54 <span v-if="n.time>0 && n.startSign<=0"> {{ language == 0 ? '我要报名' : 'REGISTER' }}</span>
47 55
48 <span v-if="n.startSign>0"> {{ language==0?'报名未开始':'Not started yet' }}</span> 56 <span v-if="n.startSign>0"> {{ language == 0 ? '报名未开始' : 'Not started yet' }}</span>
49 </a> 57 </a>
50 <div v-else style="opacity: 0.5;" class="btn-lineG mb20 mauto text-center"> 58 <div v-else class="btn-lineG mb20 mauto text-center" style="opacity: 0.5;">
51 {{ language == 0 ? '报名已结束' : 'Registration has ended' }} 59 {{ language == 0 ? '报名已结束' : 'Registration has ended' }}
52 </div> 60 </div>
53 <p class="text-gray uppercase">{{ language==0?'报名截止':'Registration Deadline' }}：{{ n.signEndTime?.slice(0,10) }}</p> 61 <p class="text-gray uppercase">{{
62 language == 0 ? '报名截止' : 'Registration Deadline'
63 }}：{{ n.signEndTime?.slice(0, 10) }}</p>
54 </div> 64 </div>
55 </el-col> 65 </el-col>
56 </el-row> 66 </el-row>
57 </div> 67 </div>
58 </div> 68 </div>
59 69
60 <el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0" description=" "/> 70 <el-empty v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228" description=" " />
61 </template> 71 </template>
62 72
63 <script setup> 73 <script setup>
64 import {ref} from "vue"; 74 import { ref } from 'vue'
65 import {onMounted} from "@vue/runtime-core"; 75 import { onMounted } from '@vue/runtime-core'
66 import {dayjs} from "element-plus" 76 import { dayjs } from 'element-plus'
67 import {useStorage} from "@vueuse/core/index"; 77 import { useStorage } from '@vueuse/core/index'
68 const language= useStorage('language',0) 78
79 const language = useStorage('language', 0)
69 80
70 const router = useRouter() 81 const router = useRouter()
71 const time = ref(0) 82 const time = ref(0)
...@@ -75,13 +86,14 @@ const props = defineProps({ ...@@ -75,13 +86,14 @@ const props = defineProps({
75 required: true 86 required: true
76 } 87 }
77 }) 88 })
78 onMounted(()=>{ 89 onMounted(() => {
79 for(let n of props.list){ 90 for (const n of props.list) {
80 var today = dayjs().format('YYYY-MM-DD HH:mm:ss') 91 var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
81 n.time = dayjs(n.signEndTime).diff(today, 'millisecond') 92 n.time = dayjs(n.signEndTime).diff(today, 'millisecond')
82 n.startSign = dayjs(n.signBeginTime).diff(today, 'millisecond') 93 n.startSign = dayjs(n.signBeginTime).diff(today, 'millisecond')
83 } 94 }
84 }) 95 })
96
85 function goDetail(id) { 97 function goDetail(id) {
86 const routeData = router.resolve({ 98 const routeData = router.resolve({
87 path: `/match/list/${id}` 99 path: `/match/list/${id}`
...@@ -90,50 +102,69 @@ function goDetail(id) { ...@@ -90,50 +102,69 @@ function goDetail(id) {
90 } 102 }
91 </script> 103 </script>
92 104
93 <style scoped lang="scss"> 105 <style lang="scss" scoped>
94 .pv20{padding: 0 20px;} 106 .pv20 {
95 .mt60{margin-top: 60px} 107 padding: 0 20px;
108 }
109
110 .mt60 {
111 margin-top: 60px
112 }
113
96 .matchItem { 114 .matchItem {
97 cursor: pointer;padding: 0 0 20px; 115 cursor: pointer;
98 background: #FFFFFF;border-bottom: 1px solid #e5e5e5; 116 padding: 0 0 20px;
117 background: #FFFFFF;
118 border-bottom: 1px solid #e5e5e5;
99 position: relative; 119 position: relative;
100 .el-col{padding-top: 20px} 120
101 .countDownTitle{margin: 0} 121 .el-col {
122 padding-top: 20px
123 }
124
125 .countDownTitle {
126 margin: 0
127 }
128
102 &:last-child { 129 &:last-child {
103 border-bottom: none; 130 border-bottom: none;
104 } 131 }
132
105 .el-avatar { 133 .el-avatar {
106 position: absolute; 134 position: absolute;
107 left: 20px; 135 left: 20px;
108 top: 30px; 136 top: 30px;
137
109 img { 138 img {
110 background: #fff; 139 background: #fff;
111 } 140 }
112 } 141 }
113 142
114 .info { 143 .info {
115 p { 144 p {
116 font-size: 14px; 145 font-size: 14px;
117 } 146 }
118 } 147 }
119 148
120 .typeTag { 149 .typeTag {
121 position: absolute; 150 position: absolute;
122 right: 0; 151 right: 0;
123 top: 0; 152 top: 0;
124 } 153 }
125 154
126 h3 { 155 h3 {
127 font-weight: 500;margin: 0 0 10px; 156 font-weight: 500;
157 margin: 0 0 10px;
128 font-size: 18px; 158 font-size: 18px;
129 color: #000000; 159 color: #000000;
130 text-overflow: ellipsis; 160 text-overflow: ellipsis;
131 } 161 }
132 162
133 &:hover h3 { 163 &:hover h3 {
134 color: var(--el-color-primary); 164 color: var(--el-color-primary);
135 } 165 }
136 } 166 }
167
137 .countDownTitle { 168 .countDownTitle {
138 text-align: center; 169 text-align: center;
139 color: #525F6B; 170 color: #525F6B;
...@@ -161,10 +192,19 @@ function goDetail(id) { ...@@ -161,10 +192,19 @@ function goDetail(id) {
161 width: 100%; 192 width: 100%;
162 left: 0; 193 left: 0;
163 } 194 }
164 .info .ppl{margin: 5px 0;} 195
165 .ppl{color: #29343C; 196 .info .ppl {
166 label{color: #929AA0;} 197 margin: 5px 0;
198 }
199
200 .ppl {
201 color: #29343C;
202
203 label {
204 color: #929AA0;
205 }
167 } 206 }
207
168 .van-count-down { 208 .van-count-down {
169 text-align: center; 209 text-align: center;
170 margin: 20px 0; 210 margin: 20px 0;
...@@ -178,7 +218,8 @@ function goDetail(id) { ...@@ -178,7 +218,8 @@ function goDetail(id) {
178 } 218 }
179 219
180 .block { 220 .block {
181 display: inline-block; opacity: 0.7; 221 display: inline-block;
222 opacity: 0.7;
182 width: 52px; 223 width: 52px;
183 color: #fff; 224 color: #fff;
184 font-size: 26px; 225 font-size: 26px;
...@@ -189,7 +230,11 @@ function goDetail(id) { ...@@ -189,7 +230,11 @@ function goDetail(id) {
189 line-height: 50px; 230 line-height: 50px;
190 text-align: center; 231 text-align: center;
191 } 232 }
233
192 @media (max-width: 1450px) { 234 @media (max-width: 1450px) {
193 .block{width: 44px;font-size: 20px;} 235 .block {
236 width: 44px;
237 font-size: 20px;
238 }
194 } 239 }
195 </style> 240 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!