xjs
/
components-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加说明

master
xjs 2025-05-23 10:37:13 +08:00
parent 21c125646e
commit 9703cd9df9
1 changed files with 85 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/sort-college/DataTable.vue
View File

@ -1,63 +1,54 @@
<template> <template>
<!-- Table --> <!-- Table -->
<table class="w-full"> <table class="w-full">
<!-- Table Header --> <!-- Table Header -->
<thead> <thead>
<tr class="text-[24rpx] text-[#505050]"> <tr class="text-[24rpx] text-[#505050]">
<th <th v-for="(headItem, index) in columns" :key="index" :style="{ width: headItem.width }" class="text-left px-[8rpx] py-[12rpx]">
v-for="(headItem, index) in columns" {{ headItem.label }}
:key="index" <span
:style="{ width: headItem.width }" class="i-carbon-help text-[#86909C]"
class="text-left px-[8rpx] py-[12rpx]" v-if="headItem.key === 'lineDiff' || headItem.key === 'rankDiff'"
> @click.stop="showToast(headItem.key === 'lineDiff' ? 1 : headItem.key === 'rankDiff' ? 2 : 0)"></span>
{{ headItem.label }} </th>
<span </tr>
class="i-carbon-help text-[#86909C]" </thead>
v-if="headItem.key === 'lineDiff' || headItem.key === 'rankDiff'"
></span>
</th>
</tr>
</thead>
<!-- Table Body --> <!-- Table Body -->
<tbody> <tbody>
<tr <tr v-for="(item, index) in recompileData" :key="index" class="text-[24rpx] text-[#505050] border-t border-[#EDEDED]">
v-for="(item, index) in recompileData" <td v-for="(col, colIndex) in columns" :key="colIndex" :style="{ width: col.width }" class="px-[8rpx] py-[12rpx]">
:key="index" <div v-if="col.key === 'lineDiff'">
class="text-[24rpx] text-[#505050] border-t border-[#EDEDED]" {{ item["lineDiff"] }}
> </div>
<td <div class="flex items-center gap-[8rpx]" v-else-if="col.key === 'rankDiff'">
v-for="(col, colIndex) in columns" {{ item["rankDiff"] }}
:key="colIndex" <img
:style="{ width: col.width }" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAATlJREFUSEu11eFNwzAQBeB3gQEyAIV2g67QDewJgBGYgHYCRmhH8AbABHSDRhSJvxmA5sEFtTKuk7jIza9EivP57l0SQcZjY8z0ApgSGAtwI0ApInpdSkYH78bcicjy6JnkOiukQAwj8Jod+rD29qd1K78qkqusUAxRsCEX2aAQIXmviGam58mQTtTEuXVseGLItXNt+zSzAkgbhq0xjxCZg5yPnFv4WB/i3zdY0QHZr/KwAKlB2pFzL7Gqe6EjxMNEpPKmqxZydtXR2jarrhc2QGoNtBB50rc+WDOIdEIhst/tpzHjncizhyUhUagL2VfhYeVQuzqHYQj5gwFlXyZhJIeMUpH/foRb6NxIm5GPEKgK0p7SktQKZWvtG35/VtWOnE2cq1IXn3KfbIwpL4ti+dU0D+dCdEPf+I3M1u2H9e8AAAAASUVORK5CYII="
class="px-[8rpx] py-[12rpx]" alt="rankDiff"
> class="w-[16rpx] h-[16rpx]"
<div v-if="col.key === 'lineDiff'"> v-if="item['rankDiff'] > 0" />
{{ item['lineDiff'] }} <img
</div> v-else
<div class="flex items-center gap-[8rpx]" v-else-if="col.key === 'rankDiff'"> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAARRJREFUSEu91EFOhDAYhuH370TXHGGOwMaEuNJM4jnKCYwnEE4yeAoTE0LcsZwb6BE8wFC1OBBGO6UmZboikPTJ9/Uvkj3rtbqkMUqK9nb7xEJLrmv9Bqzt/kaJXgqTrNZawXYIshQmFjgH1kPnwEboP9jVi05XkLZ3VRU6O0dQCGaRixUNkBgo2k1VhmB/IB82RcbhCcSckBMzlEpxb5MckI/hOSTZSciFTVLkXcduqLC/gzPJvJAzGeTt5mcIflfpw2ah6YYGHgZkSBeKBUFzU+XDslo/YniNAp2q0b5XUNCRR4Nc2NiEoYwKebAqOmTPpK/reMU7o8NVcCH203vURDeNTvZ7UhGS7pMUIUFI5ftv8gVvqo+bwdfwaAAAAABJRU5ErkJggg=="
{{ item['rankDiff'] }} alt="rankDiff"
<img class="w-[16rpx] h-[16rpx]" />
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAATlJREFUSEu11eFNwzAQBeB3gQEyAIV2g67QDewJgBGYgHYCRmhH8AbABHSDRhSJvxmA5sEFtTKuk7jIza9EivP57l0SQcZjY8z0ApgSGAtwI0ApInpdSkYH78bcicjy6JnkOiukQAwj8Jod+rD29qd1K78qkqusUAxRsCEX2aAQIXmviGam58mQTtTEuXVseGLItXNt+zSzAkgbhq0xjxCZg5yPnFv4WB/i3zdY0QHZr/KwAKlB2pFzL7Gqe6EjxMNEpPKmqxZydtXR2jarrhc2QGoNtBB50rc+WDOIdEIhst/tpzHjncizhyUhUagL2VfhYeVQuzqHYQj5gwFlXyZhJIeMUpH/foRb6NxIm5GPEKgK0p7SktQKZWvtG35/VtWOnE2cq1IXn3KfbIwpL4ti+dU0D+dCdEPf+I3M1u2H9e8AAAAASUVORK5CYII=" </div>
alt="rankDiff" <div v-else>
class="w-[16rpx] h-[16rpx]" {{ item[col.key] }}
v-if="item['rankDiff'] > 0" </div>
/> </td>
<img </tr>
v-else </tbody>
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAARRJREFUSEu91EFOhDAYhuH370TXHGGOwMaEuNJM4jnKCYwnEE4yeAoTE0LcsZwb6BE8wFC1OBBGO6UmZboikPTJ9/Uvkj3rtbqkMUqK9nb7xEJLrmv9Bqzt/kaJXgqTrNZawXYIshQmFjgH1kPnwEboP9jVi05XkLZ3VRU6O0dQCGaRixUNkBgo2k1VhmB/IB82RcbhCcSckBMzlEpxb5MckI/hOSTZSciFTVLkXcduqLC/gzPJvJAzGeTt5mcIflfpw2ah6YYGHgZkSBeKBUFzU+XDslo/YniNAp2q0b5XUNCRR4Nc2NiEoYwKebAqOmTPpK/reMU7o8NVcCH203vURDeNTvZ7UhGS7pMUIUFI5ftv8gVvqo+bwdfwaAAAAABJRU5ErkJggg==" </table>
alt="rankDiff"
class="w-[16rpx] h-[16rpx]"
/>
</div>
<div v-else>
{{ item[col.key] }}
</div>
</td>
</tr>
</tbody>
</table>
<dialog ref="myDialog">
<h1 class="text-[36rpx] text-[#000] font-700 mt-[40rpx] mb-[34rpx] text-center">{{ title }}</h1>
<p class="text-[#333] text-[28rpx] px-[32rpx]">{{ tipContent }}</p>
<div class="flex items-center justify-center py-[32rpx] border-t-[#EDEDED] border-t-solid border-t-[2rpx]">
<button @click="handleCloseModal" class="text-[#1580FF] border-none bg-[unset] text-[36rpx] outline-none">确认</button>
</div>
</dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -75,6 +66,7 @@
}, },
}); });
const myDialogRef = useTemplateRef("myDialog")
const columns = ref([ const columns = ref([
{ label: "年份", key: "year", width: "62rpx" }, { label: "年份", key: "year", width: "62rpx" },
{ label: "录取", key: "planCount", width: "54rpx" }, { label: "录取", key: "planCount", width: "54rpx" },
@ -97,4 +89,40 @@
}); });
return _data; return _data;
}); });
const title = ref('')
const tipContent = ref("")
const showToast = (type: number) => {
if (type === 1) {
title.value = "线差";
tipContent.value = "根据志愿历年最低分 - 当前批次线的差值得出，线差可为填报提供参考。";
} else if (type === 2) {
title.value = "历年位次差";
tipContent.value = "根据考生历年的等效位次 - 志愿历年录取位次的差值得出，位次差可更准确的与历年位次进行比较。";
}
myDialogRef.value?.showModal()
// uni.showModal({
// title: title,
// content: tipContent,
// showCancel: false,
// confirmColor: "#1580FF",
// });
};
const handleCloseModal = () => {
myDialogRef.value?.close()
}
</script> </script>
<style lang="scss" scoped>
dialog{
border: 1px solid transparent !important;
border-radius: 12px !important;
margin-left: 10%;
margin-right: 10%;
padding:0;
}
</style>