|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 头部区域 -->
|
|
|
<view class="header-bg">
|
|
|
<view class="header">
|
|
|
<view class="title-container">
|
|
|
<view class="icon-school"><uni-icons type="school" size="28" color="#fff"></uni-icons></view>
|
|
|
<text class="title">宽城区义务教育公办中小学学区查询</text>
|
|
|
</view>
|
|
|
<view class="header-decoration"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 查询说明区域 -->
|
|
|
<view class="description-card">
|
|
|
<view class="description">
|
|
|
<view style="display: flex;align-items: center;margin-bottom: 5px;">
|
|
|
|
|
|
<uni-icons type="info-filled" size="22" color="#1e88e5"></uni-icons>
|
|
|
|
|
|
<text class="description-title">查询须知</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text
|
|
|
class="description-text">1、本系统仅用于具有宽城区户籍的适龄儿童少年查询当年学区。请按提示要求输入适龄儿童少年本人户籍信息，主要包括户籍派出所、汉字委等信息。每个账号可以查询六次，查询结果仅作参考。</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text class="description-text">2、适龄儿童少年“入学”（入:即入校报到；学:即学习期间）片区学校应当符合“两个一致”原则。
|
|
|
不符合“两个一致”的适龄儿童少年，由区教育局统筹安排入学。</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text class="description-text">3、未查到学区信息的家长请于工作时间致电：89990223/89990224。</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 查询表单区域 -->
|
|
|
<view class="search-form-container">
|
|
|
<view class="form-header">
|
|
|
<text class="form-title">学区信息查询</text>
|
|
|
<view class="form-decoration"></view>
|
|
|
</view>
|
|
|
|
|
|
<view class="search-form">
|
|
|
<view class="form-items">
|
|
|
<view class="form-item">
|
|
|
<view class="label-container">
|
|
|
<uni-icons type="calendar" size="18" color="#1e88e5"></uni-icons>
|
|
|
<text class="label">入学学段</text>
|
|
|
</view>
|
|
|
<uni-data-select v-model="formData.stage" :localdata="stageOptions" placeholder="请选择入学学段"
|
|
|
class="custom-select">
|
|
|
</uni-data-select>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<view class="label-container">
|
|
|
<uni-icons type="location" size="18" color="#1e88e5"></uni-icons>
|
|
|
<text class="label">户籍派出所</text>
|
|
|
</view>
|
|
|
<uni-data-select v-model="formData.policeStation" :localdata="filteredPoliceStations"
|
|
|
placeholder="请选择户籍派出所" class="custom-select">
|
|
|
</uni-data-select>
|
|
|
</view>
|
|
|
|
|
|
<view class="form-item">
|
|
|
<view class="label-container">
|
|
|
<uni-icons type="home" size="18" color="#1e88e5"></uni-icons>
|
|
|
<text class="label">所在委/村</text><text class="label" style="color: #909399;">例:天安委/五星村</text>
|
|
|
</view>
|
|
|
<uni-easyinput v-model="formData.streetCommittee" placeholder="请输入所在委/村" class="custom-input">
|
|
|
</uni-easyinput>
|
|
|
</view>
|
|
|
|
|
|
<!-- 查询按钮独立一行 -->
|
|
|
<view class="search-btn-container">
|
|
|
<button class="search-btn" @click="searchSchool">
|
|
|
<uni-icons type="search" size="18" color="#fff"></uni-icons>
|
|
|
<text>查询</text>
|
|
|
</button>
|
|
|
|
|
|
</view>
|
|
|
<view class="search-limit-tip">
|
|
|
<uni-icons type="info" size="14" color="#90caf9"></uni-icons>
|
|
|
<text>最多可查询学区信息<span style="color: #F56C6C;font-weight: bolder;">{{ maxQueryCount }}
|
|
|
</span>次，当前已查询<span style="color: #F56C6C;font-weight: bolder;">{{ queryCount }} </span>
|
|
|
次</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 查询结果区域 -->
|
|
|
<view class="result-area" v-if="searchResults.length > 0">
|
|
|
<view class="result-header">
|
|
|
<uni-icons type="flag" size="20" color="#1e88e5"></uni-icons>
|
|
|
<text class="result-title">查询结果</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="card-list">
|
|
|
<view v-for="(item, index) in searchResults" :key="index" class="result-card">
|
|
|
<view class="card-header">
|
|
|
<uni-icons type="school-filled" size="20" color="#1e88e5"></uni-icons>
|
|
|
<text class="card-title">{{ item.school_name }}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="card-content">
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">户籍派出所：</text>
|
|
|
<text class="info-value">{{ item.pcs }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">所在委/村：</text>
|
|
|
<text class="info-value">{{ item.jw }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="no-result" v-else-if="hasSearched">
|
|
|
<view style="display: flex;align-items: center;margin-bottom: 5px;">
|
|
|
<uni-icons type="info" size="32" color="#078ED6"></uni-icons>
|
|
|
<text>暂未查询到相关结果</text>
|
|
|
</view>
|
|
|
|
|
|
<view style="color: red;text-align: left;padding: 0 20px">注意: 无需输入长春市宽城区等字样、无需输入小区楼宇门牌号、无需输入具体某街组号。</view>
|
|
|
<view style="color: red;text-align: left;padding: 0 20px">请按照提示输入户口所在的“委”或“村”，例如:“天安委”或“五星村”。</view>
|
|
|
</view>
|
|
|
|
|
|
<view style="height: 10px;">
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
getSearchApi
|
|
|
} from '@/api/services/index.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
formData: {
|
|
|
stage: '',
|
|
|
policeStation: '',
|
|
|
streetCommittee: ''
|
|
|
},
|
|
|
stageOptions: [{
|
|
|
value: '0',
|
|
|
text: '小学'
|
|
|
},
|
|
|
{
|
|
|
value: '1',
|
|
|
text: '初中'
|
|
|
}
|
|
|
],
|
|
|
policeStationOptions: [{
|
|
|
value: '10',
|
|
|
stage: '0',
|
|
|
text: '北京大街派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '11',
|
|
|
stage: '0',
|
|
|
text: '长新街派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '12',
|
|
|
stage: '0',
|
|
|
text: '东广场派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '13',
|
|
|
stage: '0',
|
|
|
text: '奋进派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '114',
|
|
|
stage: '0',
|
|
|
text: '凯旋路派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '5',
|
|
|
stage: '0',
|
|
|
text: '兰家派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '16',
|
|
|
stage: '0',
|
|
|
text: '柳影路派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '17',
|
|
|
stage: '0',
|
|
|
text: '孟家桥派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '18',
|
|
|
stage: '0',
|
|
|
text: '南广场派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '19',
|
|
|
stage: '0',
|
|
|
text: '西广场派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '20',
|
|
|
stage: '0',
|
|
|
text: '西三条派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: '21',
|
|
|
stage: '0',
|
|
|
text: '兴业街派出所'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
value: "50",
|
|
|
stage: '1',
|
|
|
text: "北京大街派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "51",
|
|
|
stage: '1',
|
|
|
text: "长新街派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "52",
|
|
|
stage: '1',
|
|
|
text: "东广场派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "53",
|
|
|
stage: '1',
|
|
|
text: "奋进派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "54",
|
|
|
stage: '1',
|
|
|
text: "凯旋路派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "55",
|
|
|
stage: '1',
|
|
|
text: "兰家派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "56",
|
|
|
stage: '1',
|
|
|
text: "柳影路派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "57",
|
|
|
stage: '1',
|
|
|
text: "孟家桥派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "58",
|
|
|
stage: '1',
|
|
|
text: "南广场派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "59",
|
|
|
stage: '1',
|
|
|
text: "西广场派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "60",
|
|
|
stage: '1',
|
|
|
text: "西三条派出所"
|
|
|
},
|
|
|
{
|
|
|
value: "61",
|
|
|
stage: '1',
|
|
|
text: "兴业街派出所"
|
|
|
}
|
|
|
],
|
|
|
searchResults: [],
|
|
|
hasSearched: false,
|
|
|
queryCount: 0, // 添加查询次数计数器
|
|
|
maxQueryCount: 6 // 最大查询次数
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
filteredPoliceStations() {
|
|
|
if (!this.formData.stage) {
|
|
|
return [];
|
|
|
}
|
|
|
return this.policeStationOptions.filter(item => item.stage === this.formData.stage);
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
'formData.stage'(newVal) {
|
|
|
// 当学段改变时，清空已选择的派出所
|
|
|
this.formData.policeStation = '';
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
// 页面加载时从cookie中恢复数据
|
|
|
this.loadDataFromCookie();
|
|
|
},
|
|
|
methods: {
|
|
|
// 从cookie中加载数据
|
|
|
loadDataFromCookie() {
|
|
|
try {
|
|
|
// 读取查询次数
|
|
|
const countStr = uni.getStorageSync('queryCount');
|
|
|
if (countStr) {
|
|
|
this.queryCount = parseInt(countStr);
|
|
|
}
|
|
|
|
|
|
// 读取上次查询条件
|
|
|
const lastQueryStr = uni.getStorageSync('lastQuery');
|
|
|
if (lastQueryStr) {
|
|
|
const lastQuery = JSON.parse(lastQueryStr);
|
|
|
this.formData.stage = lastQuery.stage || '';
|
|
|
// 使用nextTick或setTimeout等待DOM更新后再设置派出所
|
|
|
this.$nextTick(() => {
|
|
|
this.formData.policeStation = lastQuery.policeStation || '';
|
|
|
this.formData.streetCommittee = lastQuery.streetCommittee || '';
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 读取上次查询结果
|
|
|
const resultsStr = uni.getStorageSync('searchResults');
|
|
|
if (resultsStr) {
|
|
|
this.searchResults = JSON.parse(resultsStr);
|
|
|
if (this.searchResults.length > 0) {
|
|
|
this.hasSearched = false;
|
|
|
} else {
|
|
|
this.hasSearched = this.searchResults.length === 0 && countStr !== null;
|
|
|
}
|
|
|
}
|
|
|
} catch (e) {
|
|
|
// 如果出错，重置数据
|
|
|
console.error('从cookie加载数据出错:', e);
|
|
|
this.resetCookieData();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 保存数据到cookie
|
|
|
saveDataToCookie() {
|
|
|
// 保存查询次数
|
|
|
uni.setStorageSync('queryCount', this.queryCount.toString());
|
|
|
|
|
|
// 保存查询条件
|
|
|
const lastQuery = {
|
|
|
stage: this.formData.stage,
|
|
|
policeStation: this.formData.policeStation,
|
|
|
streetCommittee: this.formData.streetCommittee
|
|
|
};
|
|
|
uni.setStorageSync('lastQuery', JSON.stringify(lastQuery));
|
|
|
|
|
|
// 保存查询结果
|
|
|
uni.setStorageSync('searchResults', JSON.stringify(this.searchResults));
|
|
|
},
|
|
|
|
|
|
// 重置cookie数据
|
|
|
resetCookieData() {
|
|
|
uni.removeStorageSync('queryCount');
|
|
|
uni.removeStorageSync('lastQuery');
|
|
|
uni.removeStorageSync('searchResults');
|
|
|
this.queryCount = 0;
|
|
|
},
|
|
|
|
|
|
searchSchool() {
|
|
|
// this.hasSearched = true;
|
|
|
|
|
|
if (this.queryCount >= this.maxQueryCount) {
|
|
|
uni.showToast({
|
|
|
title: '您已达到最大查询次数(6次)',
|
|
|
icon: 'none',
|
|
|
duration: 3000
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
|
|
|
if (!this.formData.stage) {
|
|
|
uni.showToast({
|
|
|
title: '请选择入学学段',
|
|
|
icon: 'none',
|
|
|
duration: 2000
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!this.formData.policeStation) {
|
|
|
uni.showToast({
|
|
|
title: '请选择户籍派出所',
|
|
|
icon: 'none',
|
|
|
duration: 2000
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!this.formData.streetCommittee) {
|
|
|
uni.showToast({
|
|
|
title: '请输入所在委/村',
|
|
|
icon: 'none',
|
|
|
duration: 2000
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (this.formData.streetCommittee.length < 2) {
|
|
|
uni.showToast({
|
|
|
title: '您输入的所在委/村不能仅输入一个字符！',
|
|
|
icon: 'none',
|
|
|
duration: 2500
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
|
|
|
// 模拟查询结果，实际项目中应通过API获取数据
|
|
|
if (this.formData.stage && this.formData.policeStation && this.formData.streetCommittee) {
|
|
|
|
|
|
// 增加查询次数
|
|
|
this.queryCount++;
|
|
|
|
|
|
const stageText = this.stageOptions.find(item => item.value === this.formData.stage)?.text || '';
|
|
|
const policeStationText = this.policeStationOptions.find(item => item.value === this.formData
|
|
|
.policeStation)?.text || '';
|
|
|
|
|
|
getSearchApi({
|
|
|
stage: stageText,
|
|
|
police_station: policeStationText,
|
|
|
street: this.formData.streetCommittee
|
|
|
}).then((res) => {
|
|
|
if (res.data.school_list.length > 0) {
|
|
|
this.hasSearched = false;
|
|
|
} else {
|
|
|
this.hasSearched = true;
|
|
|
}
|
|
|
this.searchResults = res.data.school_list
|
|
|
|
|
|
|
|
|
this.saveDataToCookie();
|
|
|
|
|
|
|
|
|
}).catch((err) => {
|
|
|
this.searchResults = [];
|
|
|
uni.showToast({
|
|
|
title: res.msg,
|
|
|
icon: 'none',
|
|
|
duration: 2500
|
|
|
});
|
|
|
// 查询失败不计入次数
|
|
|
this.queryCount--;
|
|
|
this.saveDataToCookie();
|
|
|
return;
|
|
|
}).finally(() => {
|
|
|
// 添加滚动到底部的功能
|
|
|
setTimeout(() => {
|
|
|
uni.pageScrollTo({
|
|
|
scrollTop: 9999,
|
|
|
duration: 200
|
|
|
});
|
|
|
}, 10);
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
this.searchResults = [];
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
.container {
|
|
|
padding: 0;
|
|
|
background-color: #f5f9fc;
|
|
|
min-height: 100vh;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
/* 头部样式 */
|
|
|
.header-bg {
|
|
|
background: linear-gradient(135deg, #29b6f6, #0277bd);
|
|
|
height: 180px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
/* 确保下拉框不被遮盖 */
|
|
|
.uni-select--mask {
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
.uni-select__selector {
|
|
|
z-index: 101;
|
|
|
}
|
|
|
|
|
|
.uni-select__selector-item {
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
.search-form-container {
|
|
|
overflow: visible !important;
|
|
|
}
|
|
|
|
|
|
.search-form {
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
.form-items {
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
/* 确保下拉选项显示在其他元素上方 */
|
|
|
.uni-select-cover {
|
|
|
z-index: 102;
|
|
|
}
|
|
|
|
|
|
|
|
|
.header {
|
|
|
padding: 30px 20px;
|
|
|
position: relative;
|
|
|
z-index: 5;
|
|
|
}
|
|
|
|
|
|
.title-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.icon-school {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
color: #ffffff;
|
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.header-decoration {
|
|
|
width: 80px;
|
|
|
height: 3px;
|
|
|
background-color: #ffffff;
|
|
|
margin: 0 auto;
|
|
|
border-radius: 3px;
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
/* 查询说明样式 */
|
|
|
.description-card {
|
|
|
margin: -86px 20px 20px;
|
|
|
background: #ffffff;
|
|
|
border-radius: 12px;
|
|
|
padding: 15px 20px;
|
|
|
display: flex;
|
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
.card-icon {
|
|
|
padding-right: 5px;
|
|
|
/* padding-top: 3px; */
|
|
|
}
|
|
|
|
|
|
.description-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: #1e88e5;
|
|
|
/* margin-bottom: 8px; */
|
|
|
display: block;
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.description-text {
|
|
|
font-size: 14px;
|
|
|
color: #555;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
/* 查询表单样式 */
|
|
|
.search-form-container {
|
|
|
margin: 20px 20px 10px 20px;
|
|
|
background-color: #ffffff;
|
|
|
border-radius: 12px;
|
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.form-header {
|
|
|
background: linear-gradient(90deg, #29b6f6, #0288d1);
|
|
|
padding: 12px 20px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.form-title {
|
|
|
color: #ffffff;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.form-decoration {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
width: 40px;
|
|
|
height: 3px;
|
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
|
|
|
.search-form {
|
|
|
display: flex;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.form-items {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.form-item {
|
|
|
margin-bottom: 18px;
|
|
|
}
|
|
|
|
|
|
.label-container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
.label {
|
|
|
font-size: 15px;
|
|
|
color: #333;
|
|
|
margin-left: 6px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.custom-select,
|
|
|
.custom-input {
|
|
|
border-radius: 6px;
|
|
|
border: 1px solid #e0e0e0;
|
|
|
background-color: #f9f9f9;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
.custom-select:hover,
|
|
|
.custom-input:hover {
|
|
|
border-color: #90caf9;
|
|
|
box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.1);
|
|
|
}
|
|
|
|
|
|
/* 添加查询次数提示样式 */
|
|
|
.search-limit-tip {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-top: 10px;
|
|
|
font-size: 13px;
|
|
|
color: #5d93c5;
|
|
|
}
|
|
|
|
|
|
.search-limit-tip text {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.search-btn-container {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.search-btn {
|
|
|
background: linear-gradient(135deg, #29b6f6, #0288d1);
|
|
|
color: #ffffff;
|
|
|
border: none;
|
|
|
height: 45px;
|
|
|
line-height: 45px;
|
|
|
border-radius: 8px;
|
|
|
font-size: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
box-shadow: 0 4px 10px rgba(0, 150, 220, 0.3);
|
|
|
transition: all 0.3s;
|
|
|
width: 200px;
|
|
|
}
|
|
|
|
|
|
.search-btn:active {
|
|
|
transform: translateY(2px);
|
|
|
box-shadow: 0 2px 5px rgba(0, 150, 220, 0.3);
|
|
|
}
|
|
|
|
|
|
.search-btn text {
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
|
|
|
/* 查询结果样式 */
|
|
|
.result-area {
|
|
|
margin: 30px 20px;
|
|
|
}
|
|
|
|
|
|
.result-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.result-title {
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #1e88e5;
|
|
|
margin-left: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.card-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 15px;
|
|
|
}
|
|
|
|
|
|
.result-card {
|
|
|
border-radius: 10px;
|
|
|
background-color: #ffffff;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
border-left: 4px solid #1e88e5;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
.result-card:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.card-header {
|
|
|
background-color: #e3f2fd;
|
|
|
padding: 12px 15px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
border-bottom: 1px solid #e3f2fd;
|
|
|
}
|
|
|
|
|
|
.card-title {
|
|
|
color: #0277bd;
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
|
|
|
.card-content {
|
|
|
padding: 15px 15px 5px 15px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.info-label {
|
|
|
color: #666;
|
|
|
width: 90px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.info-value {
|
|
|
color: #333;
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.card-footer {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
padding-top: 5px;
|
|
|
}
|
|
|
|
|
|
.card-tag {
|
|
|
background-color: #e3f2fd;
|
|
|
color: #1e88e5;
|
|
|
font-size: 12px;
|
|
|
padding: 3px 10px;
|
|
|
border-radius: 12px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.no-result {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
/* padding: 50px 0; */
|
|
|
color: #078ED6;
|
|
|
text-align: center;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.no-result text {
|
|
|
margin-top: 15px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.footer-decoration {
|
|
|
position: fixed;
|
|
|
/* 改为fixed定位 */
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
overflow: hidden;
|
|
|
height: 100px;
|
|
|
z-index: 0;
|
|
|
/* 调整z-index为正值或0 */
|
|
|
}
|
|
|
|
|
|
.wave {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 200%;
|
|
|
height: 100px;
|
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%2390caf9" fill-opacity="0.2" d="M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,213.3C840,224,960,224,1080,202.7C1200,181,1320,139,1380,117.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>') repeat-x;
|
|
|
background-size: 1440px 100px;
|
|
|
animation: wave 12s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes wave {
|
|
|
0% {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
}
|
|
|
</style> |
