提交 19da474e 编写于 作者: 夏天。。's avatar 夏天。。

Merge remote-tracking branch 'origin/dev' into dev

......@@ -5,13 +5,13 @@
declare module 'vue' {
export interface GlobalComponents {
ACarousel: typeof import('ant-design-vue/es')['Carousel']
AInput: typeof import('ant-design-vue/es')['Input']
APagination: typeof import('ant-design-vue/es')['Pagination']
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ATimeline: typeof import('ant-design-vue/es')['Timeline']
ATimelineItem: typeof import('ant-design-vue/es')['TimelineItem']
Daily: typeof import('./src/components/Daily/index.vue')['default']
Detail: typeof import('./src/components/Detail/index.vue')['default']
Home: typeof import('./src/components/Home/index.vue')['default']
MentalMap: typeof import('./src/components/MentalMap/index.vue')['default']
Total: typeof import('./src/components/Total/index.vue')['default']
......
......@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>OlympicSystem</title>
</head>
<body>
<div id="app"></div>
......
import { message } from 'ant-design-vue';
import { onMounted, reactive, defineComponent, toRefs } from 'vue'
import { useRouter } from 'vue-router';
import { reqGetItems, reqGetSites, reqSearch } from '../../api';
import DailyTitle from '../../common/DailyTitle.vue'
import { dailyItem, dateOption } from '../../config/dailyConfig';
......@@ -12,6 +13,8 @@ export default defineComponent({
setup() {
const router = useRouter();
let state = reactive({
optionIndex: 1, // 1根据比赛日期,2根据比赛项目,3根据比赛场馆
total: 1,
......@@ -87,12 +90,33 @@ export default defineComponent({
getList();
}
// 跳转
const toDetail = (item : dailyItem) => {
let str = item.itemcodename + " " + item.title;
str += item.homename? (item.homename + "VS" + item.awayname):'';
let itemCode = 0;
if(item.itemcodename == "雪橇") itemCode = 1;
else if(item.itemcodename == "冬季两项") itemCode = 2;
else if(item.itemcodename == "跳台滑雪") itemCode = 3;
router.push({
name: 'detail',
params: {
gameName: str,
itemCode
}
})
}
return {
...toRefs(state),
dateOption,
handleSelectChange,
handlePageChange,
resetList
resetList,
toDetail
}
}
......
......@@ -8,7 +8,6 @@
<p>每日赛程</p>
</div>
<div class="selectBox">
<a-select v-model:value="form.date" @change="handleSelectChange">
<a-select-option
v-for="item of dateOption"
......@@ -30,7 +29,7 @@
v-model:value="siteOption[index]"
>{{ item }}</a-select-option>
</a-select>
<div class="resetBtn" @click="resetList">重 置</div>
<div class="resetBtn" @click="resetList">重 置</div>
</div>
</div>
......@@ -39,18 +38,18 @@
<!-- 列表 -->
<div class="listBox">
<div class="listItem" v-if="list.length==0">
<div class="listItem" v-if="list.length == 0">
<p>暂无数据</p>
</div>
<div v-else>
<div class="listItem" v-for="item of list" v-bind:key="item.matchId">
<span>{{ item.startdatecn }}</span>
<span>{{ item.itemcodename }}</span>
<span>{{ item.title }} {{item.homename? (item.homename + "VS" + item.awayname):""}}</span>
<span>{{ item.venuename }}</span>
<span>已结束</span>
<span>成绩公报</span>
</div>
<span>{{ item.startdatecn }}</span>
<span>{{ item.itemcodename }}</span>
<span>{{ item.title }} {{ item.homename ? (item.homename + "VS" + item.awayname) : "" }}</span>
<span>{{ item.venuename }}</span>
<span>已结束</span>
<span @click="toDetail(item)">成绩公报</span>
</div>
</div>
</div>
......
.main {
height: 800px;
padding-top: 40px;
background-image: url(../../assets/img/bg.png);
-moz-background-size :cover;
-webkit-background-size :cover;
-o-background-size :cover;
background-size :cover;
.titleBox {
width: 80%;
margin-left: 4%;
position: relative;
img {
position: absolute;
width: 80px;
top: -40px;
}
div {
width: fit-content;
margin: 16px 0 0 40px;
padding: 5px 20px 5px 35px;
color: #1a2763;
background-color: rgba(242, 242, 242, 0.8);
border-top-right-radius: 15px;
font-size: 22px;
font-weight: bold;
letter-spacing: 2px;
}
}
.table {
width: 92%;
margin-left: 4%;
margin-top: 20px;
height: 200px;
padding: 0 16px;
// 表格标题
.tableTitle{
margin-bottom: 20px;
background-color: rgba(227, 235, 246, 0.8);
border-radius: 10px;
display: flex;
span {
color: #19489a;
font-size: 1.3em;
line-height: 3.2em;
letter-spacing: 5px;
font-weight: bold;
text-align: center;
display: block;
}
span:nth-child(1) {
width: 10%;
}
span:nth-child(2) {
width: 10%;
}
span:nth-child(3) {
width: 30%;
}
span:nth-child(4) {
width: 30%;
}
span:nth-child(5) {
width: 20%;
}
}
// 表格内容
.tableData {
background-color: rgba(227, 235, 246, 0.8);
border-radius: 15px;
padding: 20px 0;
max-height: 550px;
overflow-y: scroll;
.listItem {
display: flex;
p {
margin: 0 auto;
color: #1a2763;
font-size: 1.2em;
letter-spacing: 5px;
}
span {
font-size: 1.1em;
line-height: 2.5em;
text-align: center;
display: block;
}
span:nth-child(1) {
width: 10%;
}
span:nth-child(2) {
width: 10%;
}
span:nth-child(3) {
width: 30%;
}
span:nth-child(4) {
width: 30%;
}
span:nth-child(5) {
width: 20%;
}
}
}
}
}
\ No newline at end of file
import { computed, defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { DetailData, dongjiData, xueqiaoData, tiaotaiData } from "../../config/detailConfig";
export default defineComponent({
setup() {
const route = useRoute();
const itemName = computed(() => { return route.params.gameName })
const itemCode = computed(() => { return route.params.itemCode })
let state = reactive({
title: itemName.value,
itemCode: itemCode.value,
listData : [] as DetailData[]
})
onMounted(() => {
if(itemCode.value == "1") state.listData = xueqiaoData;
else if(itemCode.value == "2") state.listData = dongjiData;
else if(itemCode.value == "3") state.listData = tiaotaiData;
console.log(state.listData);
})
return {
...toRefs(state)
}
}
})
\ No newline at end of file
<template>
<div class="main">
<div class="titleBox">
<img src="../../assets/img/xiaoren6.png" />
<div>{{ title }}</div>
</div>
<div class="table">
<div class="tableTitle">
<span>排名</span>
<span>出场顺序</span>
<span>国家/地区</span>
<span>姓名/代表队</span>
<span>总成绩</span>
</div>
<div class="tableData">
<div class="listItem" v-if="itemCode == '0'">
<p>暂无数据</p>
</div>
<div v-else>
<div class="listItem" v-for="item of listData" v-bind:key="item.id">
<span>{{ item.rank }}</span>
<span>{{ item.order }}</span>
<span>{{ item.country }}</span>
<span>{{ item.name }}</span>
<span>{{ item.grade }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Detail from './index';
export default Detail;
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
\ No newline at end of file
......@@ -67,6 +67,7 @@
display: block;
text-align: center;
font-size: 1em;
line-height: 2.65em;
}
span:nth-child(1) {
width: 15%;
......@@ -88,6 +89,12 @@
}
}
.chinaPart {
color: #945065;
font-weight: 600;
background-color: #f6e4e4;
}
.pagination {
margin-top: 20px;
display: flex;
......
......@@ -14,7 +14,7 @@
<div class="totalBox">
<TotalTitle></TotalTitle>
<img class="xiaoren" src="../../assets/img/xiaoren1.png" />
<div class="totalItem" v-for="(item) of list" v-bind:key="item.countryId">
<div v-bind:class="item.countryName =='中国' ? 'totalItem chinaPart': 'totalItem'" v-for="(item) of list" v-bind:key="item.countryId">
<span>{{ item.medalRank }}</span>
<span>{{ item.countryName }}</span>
<span>{{ item.gold }}</span>
......
export interface DetailData {
id: number,
rank?: number,
order: number,
country: String,
name: String,
grade: string
}
export const xueqiaoData = [
{
id: 1,
rank: 1,
order: 14,
country: "德国",
name: "纳塔莉·盖森贝格尔 约翰内斯·路德维希",
grade: "3:03.406"
},
{
id: 2,
rank: 2,
order: 12,
country: "奥地利",
name: "马德莱娜·埃格勒 沃尔夫冈·金德尔",
grade: "3:03.486"
},
{
id: 3,
rank: 3,
order: 12,
country: "拉脱维亚",
name: "伊丽莎·季鲁马 克里斯特斯·阿帕约兹",
grade: "3:04.354"
},
{
id: 4,
rank: 4,
order: 10,
country: "俄罗斯奥运队",
name: "塔季扬娜·伊万诺娃 罗曼·雷皮洛夫",
grade: "3:04.667"
},
{
id: 5,
rank: 5,
order: 11,
country: "意大利",
name: "安德烈娅·沃特 莱昂·费尔德雷",
grade: "3:04.852"
},
{
id: 6,
rank: 6,
order: 8,
country: "加拿大",
name: "特里妮蒂·埃利斯 里德·沃茨",
grade: "3:05.235"
},
{
id: 7,
rank: 7,
order: 9,
country: "美国",
name: "阿什莉·法夸尔森 克里斯·马兹德泽",
grade: "3:05.741"
},
{
id: 8,
rank: 8,
order: 6,
country: "波兰",
name: "克劳迪娅·多马拉兹卡 马特乌什·索霍维奇",
grade: "3:07.136"
},
{
id: 9,
rank: 9,
order: 2,
country: "罗马尼亚",
name: "拉卢卡·斯特拉马图拉鲁 瓦伦丁·克雷楚",
grade: "3:07.692"
},
{
id: 10,
rank: 10,
order: 1,
country: "捷克",
name: "安娜·切日科娃 米海尔·莱塞克",
grade: "3:09.556"
},
{
id: 11,
rank: 11,
order: 5,
country: "乌克兰",
name: "尤利安娜·图尼茨卡 安东·杜卡奇",
grade: "3:09.604"
},
{
id: 12,
rank: 12,
order: 3,
country: "中国",
name: "王沛宣 范铎耀",
grade: "3:10.182"
},
{
id: 13,
rank: 13,
order: 4,
country: "韩国",
name: "埃琳·克里斯蒂娜·弗里施 林南奎",
grade: "3:11.238"
},
]
export const dongjiData = [
{
id: 1,
rank: 1,
order: 10,
country: "法国",
name: "朱斯蒂娜·布雷萨-布歇",
grade: "40:18.0"
},
{
id: 2,
rank: 2,
order: 6,
country: "挪威",
name: "特丽尔·埃克霍夫",
grade: "40:33.3"
},
{
id: 3,
rank: 3,
order: 2,
country: "挪威",
name: "马特·奥尔斯布·雷塞兰",
grade: "40:52.9"
},
{
id: 4,
rank: 4,
order: 13,
country: "捷克",
name: "玛尔凯塔·达维多娃",
grade: "41:11.4"
},
{
id: 5,
rank: 5,
order: 15,
country: "俄罗斯奥运队",
name: "克里斯季娜·雷兹佐娃",
grade: "41:29.0"
},
{
id: 6,
rank: 6,
order: 14,
country: "法国",
name: "朱莉娅·西蒙",
grade: "41:40.6"
},
{
id: 7,
rank: 7,
order: 19,
country: "乌克兰",
name: "尤利娅·吉马",
grade: "41:43.7"
},
{
id: 8,
rank: 8,
order: 25,
country: "德国",
name: "弗兰齐丝卡·普罗伊斯 ",
grade: "41:44.4"
},
{
id: 9,
rank: 9,
order: 4,
country: "瑞典",
name: "埃尔薇拉·厄贝里",
grade: "41:55.7"
},
{
id: 10,
rank: 10,
order: 11,
country: "白俄罗斯",
name: "汉娜·索拉",
grade: "41:57.2"
},
{
id: 11,
rank: 11,
order: 8,
country: "奥地利",
name: "莉萨·特雷莎·豪泽",
grade: "42:07.6"
},
{
id: 12,
rank: 12,
order: 7,
country: "白俄罗斯",
name: "济娜拉·阿林别卡娃",
grade: "42:19.2"
},
{
id: 13,
rank: 13,
order: 1,
country: "德国",
name: "丹尼丝·赫尔曼",
grade: "42:27.1"
},
{
id: 14,
rank: 14,
order: 24,
country: "奥地利",
name: "卡塔琳娜·伊纳霍费尔",
grade: "42:42.7"
},
]
export const tiaotaiData = [
{
id: 1,
rank: 1,
order: 29,
country: "斯洛文尼亚",
name: "博加塔伊",
grade: "239.0"
},
{
id: 2,
rank: 2,
order: 30,
country: "德国",
name: "阿尔托斯",
grade: "236.8"
},
{
id: 3,
rank: 3,
order: 28,
country: "斯洛文尼亚",
name: "克里兹纳",
grade: "232.0"
},
{
id: 4,
rank: 4,
order: 26,
country: "日本",
name: "高梨沙罗",
grade: "224.1"
},
{
id: 5,
rank: 5,
order: 27,
country: "斯洛文尼亚",
name: "克里内克",
grade: "215.4"
},
{
id: 6,
rank: 6,
order: 19,
country: "挪威",
name: "奥佩特",
grade: "200.5"
},
{
id: 7,
rank: 7,
order: 22,
country: "俄罗斯奥运队",
name: "阿瓦库莫娃",
grade: "196.3"
},
{
id: 8,
rank: 8,
order: 16,
country: "奥地利",
name: "莉萨·埃德",
grade: "193.4"
},
{
id: 9,
rank: 9,
order: 23,
country: "斯洛文尼亚",
name: "罗盖尔",
grade: "184.2"
},
{
id: 10,
rank: 10,
order: 14,
country: "俄罗斯奥运队",
name: "马欣妮娅",
grade: "180.9"
},
{
id: 11,
rank: 11,
order: 24,
country: "法国",
name: "莉帕尼耶",
grade: "179.5"
},
{
id: 12,
rank: 12,
order: 17,
country: "奥地利",
name: "伊拉什科-斯托尔茨",
grade: "178.0"
},
{
id: 13,
rank: 13,
order: 21,
country: "日本",
name: "伊藤有希",
grade: "176.7"
},
{
id: 14,
rank: 14,
order: 18,
country: "日本",
name: "势藤优花",
grade: "176.5"
},
]
\ No newline at end of file
......@@ -3,6 +3,7 @@ import Home from '../components/Home/index.vue';
import Total from '../components/Total/index.vue';
import Daily from '../components/Daily/index.vue';
import MentalMap from '../components/MentalMap/index.vue';
import Detail from "../components/Detail/index.vue";
const routes = [
{
......@@ -33,6 +34,11 @@ const routes = [
name: "mentalMap",
component: MentalMap,
},
{
path: "/detail",
name: "detail",
component: Detail,
},
];
export default createRouter({
......
......@@ -42,3 +42,52 @@ A) Service/DAO 层方法命名规约
**2.3**采用 4 个空格缩进,如果使用 tab 字符需要设置4空格缩进
## 前端Typescript代码规范(来源Typescript使用手册)
#### 命名
1. 使用PascalCase为类型命名。
2. 不要使用`I`做为接口名前缀。
3. 使用PascalCase为枚举值命名。
4. 使用camelCase为函数命名。
5. 使用camelCase为属性或本地变量命名。
6. 不要为私有属性名添加`_`前缀。
7. 尽可能使用完整的单词拼写命名。
#### 类型
1. 不要导出类型/函数,除非你要在不同的组件中共享它。
2. 不要在全局命名空间内定义类型/值。
3. 共享的类型应该在`types.ts`里定义。
4. 在一个文件里,类型定义应该出现在顶部。
#### `null` 和 `undefined`:
1. 使用 **undefined**,不要使用 null。
#### 风格
1. 使用arrow函数代替匿名函数表达式。
2. 只要需要的时候才把arrow函数的参数括起来。
比如,`(x) => x + x`是错误的,下面是正确的做法:
3. `x => x + x`
4. `(x,y) => x + y`
5. `<T>(x: T, y: T) => x === y`
6. 总是使用`{}`把循环体和条件语句括起来。
7. 开始的`{`总是在同一行。
8. `for (var i = 0, n = str.length; i < 10; i++) { }`
9. `if (x < 10) { }`
10. `function f(x: number, y: string): void { }`
11. 每个变量声明语句只声明一个变量
(比如 使用 `var x = 1; var y = 2;` 而不是 `var x = 1, y = 2;`)。
12. `else`要在结束的`}`后另起一行。
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册