|
|
@@ -15,8 +15,8 @@
|
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!--查询结果-->
|
|
|
- <div class="search-result-box">
|
|
|
+ <!--未查询结果-->
|
|
|
+ <div class="search-result-box" v-show="showResult == 1">
|
|
|
<div class="search-result-box-title">
|
|
|
本地区暂未开通调研中心,欢迎有意从事法制公益性工作的公民或法人单位申请代理。
|
|
|
<br />
|
|
|
@@ -25,135 +25,106 @@
|
|
|
<div class="search-result-box-qq">
|
|
|
<div>QQ咨询:</div>
|
|
|
<div>
|
|
|
- <img src="@/public/search/qq.gif" alt="">
|
|
|
- <img src="@/public/search/qq.gif" alt="">
|
|
|
+ <NuxtLink to="https://wpa.qq.com/msgrd?v=3&uin=1234567890&site=qq&menu=yes">
|
|
|
+ <img src="@/public/search/qq.gif" alt="点击这里给我发消息" title="点击这里给我发消息">
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="http://wpa.qq.com/msgrd?v=3&uin=1224368922&site=qq&menu=yes">
|
|
|
+ <img src="@/public/search/qq.gif" alt="点击这里给我发消息" title="点击这里给我发消息">
|
|
|
+ </NuxtLink>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="search-result-box-back">
|
|
|
- <NuxtLink to="/">返回首页>></NuxtLink>
|
|
|
+ <span @click="returnSearchPage">返回首页>></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!--查询-->
|
|
|
- <div class="search-box">
|
|
|
- <div class="search-left-box">
|
|
|
- <div>
|
|
|
- <span class="search-left-box-text">地区:</span>
|
|
|
- <el-select v-model="province" placeholder="--" size="large" style="width: 180px"
|
|
|
- popper-class="custom-select-dropdown">
|
|
|
- <el-option v-for="item in provinceList" :key="item.id" :label="item.name" @click="change(item.id)"
|
|
|
- :value="item.id" />
|
|
|
- </el-select>
|
|
|
- <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 180px"
|
|
|
- popper-class="custom-select-dropdown">
|
|
|
- <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
|
|
|
- @click="change1(item.id)" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 180px"
|
|
|
- popper-class="custom-select-dropdown">
|
|
|
- <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <button>搜索</button>
|
|
|
- </div>
|
|
|
- <div class="search-right-box">
|
|
|
- <img src="@/public/search/dszx.png" alt="">
|
|
|
- <div>手机扫描查询</div>
|
|
|
+ <!--查询结果-->
|
|
|
+ <div class="search-result-box-content" v-show="showResult == 2">
|
|
|
+ <div class="search-result-content-title">{{ resuluData.name }}</div>
|
|
|
+ <div class="search-result-content-file">
|
|
|
+ <div>关于成立{{ resuluData.name }}的决定</div>
|
|
|
+ <div>关于{{ resuluData.name }}负责人任命通知</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="search-list-box">
|
|
|
- <div class="search-list-box-title">中心列表</div>
|
|
|
- <div class="search-list-box-main">
|
|
|
- <NuxtLink to="/">京</NuxtLink>
|
|
|
- <NuxtLink to="/">津</NuxtLink>
|
|
|
- <NuxtLink to="/">沪</NuxtLink>
|
|
|
- <NuxtLink to="/">渝</NuxtLink>
|
|
|
- <NuxtLink to="/">冀</NuxtLink>
|
|
|
- <NuxtLink to="/">豫</NuxtLink>
|
|
|
- <NuxtLink to="/">云</NuxtLink>
|
|
|
- <NuxtLink to="/">辽</NuxtLink>
|
|
|
- <NuxtLink to="/">黑</NuxtLink>
|
|
|
- <NuxtLink to="/">湘</NuxtLink>
|
|
|
- <NuxtLink to="/">皖</NuxtLink>
|
|
|
- <NuxtLink to="/">鲁</NuxtLink>
|
|
|
- <NuxtLink to="/">新</NuxtLink>
|
|
|
- <NuxtLink to="/">苏</NuxtLink>
|
|
|
- <NuxtLink to="/">浙</NuxtLink>
|
|
|
- <NuxtLink to="/">赣</NuxtLink>
|
|
|
- <NuxtLink to="/">鄂</NuxtLink>
|
|
|
- <NuxtLink to="/">桂</NuxtLink>
|
|
|
- <NuxtLink to="/">甘</NuxtLink>
|
|
|
- <NuxtLink to="/">晋</NuxtLink>
|
|
|
- <NuxtLink to="/">蒙</NuxtLink>
|
|
|
- <NuxtLink to="/">陕</NuxtLink>
|
|
|
- <NuxtLink to="/">吉</NuxtLink>
|
|
|
- <NuxtLink to="/">闽</NuxtLink>
|
|
|
- <NuxtLink to="/">贵</NuxtLink>
|
|
|
- <NuxtLink to="/">粤</NuxtLink>
|
|
|
- <NuxtLink to="/">青</NuxtLink>
|
|
|
- <NuxtLink to="/">藏</NuxtLink>
|
|
|
- <NuxtLink to="/">川</NuxtLink>
|
|
|
- <NuxtLink to="/">宁</NuxtLink>
|
|
|
- <NuxtLink to="/">琼</NuxtLink>
|
|
|
- <NuxtLink to="/">港</NuxtLink>
|
|
|
- <NuxtLink to="/">澳</NuxtLink>
|
|
|
- <NuxtLink to="/">台</NuxtLink>
|
|
|
+ <div class="search-result-content-info">
|
|
|
+ <div>负责人信息</div>
|
|
|
</div>
|
|
|
- <div class="search-list-box-content">
|
|
|
- <div class="cityname">
|
|
|
- <div class="sheng">
|
|
|
- <NuxtLink to="/">北京</NuxtLink>
|
|
|
+ <div class="search-result-content-table">
|
|
|
+ <div class="search-result-content-tr">
|
|
|
+ <div class="search-result-content-line-title">
|
|
|
+ <div>主任</div>
|
|
|
+ <div>联系方式</div>
|
|
|
+ <div>通讯地址</div>
|
|
|
+ <div>邮编</div>
|
|
|
+ </div>
|
|
|
+ <div class="search-result-content-line-text">
|
|
|
+ <div>{{ resuluData.zhuren_name }}</div>
|
|
|
+ <div>{{ resuluData.zhuren_phone }}</div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div class="search-result-content-line-title">
|
|
|
+ <div>副主任</div>
|
|
|
+ <div>联系方式</div>
|
|
|
+ <div>通讯地址</div>
|
|
|
+ <div>邮编</div>
|
|
|
</div>
|
|
|
- <div class="shi">
|
|
|
- <NuxtLink to="/">东城区</NuxtLink>
|
|
|
- <NuxtLink to="/">延庆县</NuxtLink>
|
|
|
- <NuxtLink to="/">西城区</NuxtLink>
|
|
|
- <NuxtLink to="/">朝阳区</NuxtLink>
|
|
|
- <NuxtLink to="/">丰台区</NuxtLink>
|
|
|
- <NuxtLink to="/">石景山区</NuxtLink>
|
|
|
- <NuxtLink to="/">海淀区</NuxtLink>
|
|
|
- <NuxtLink to="/">门头沟区</NuxtLink>
|
|
|
- <NuxtLink to="/">房山区</NuxtLink>
|
|
|
- <NuxtLink to="/">通州区</NuxtLink>
|
|
|
- <NuxtLink to="/">顺义区</NuxtLink>
|
|
|
- <NuxtLink to="/">昌平区</NuxtLink>
|
|
|
- <NuxtLink to="/">大兴区</NuxtLink>
|
|
|
- <NuxtLink to="/">怀柔区</NuxtLink>
|
|
|
- <NuxtLink to="/">平谷区</NuxtLink>
|
|
|
- <NuxtLink to="/">密云县</NuxtLink>
|
|
|
+ <div class="search-result-content-line-text">
|
|
|
+ <div>{{ resuluData.fu_name }}</div>
|
|
|
+ <div>{{ resuluData.fu_phone }}</div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="cityname">
|
|
|
- <div class="sheng">
|
|
|
- <NuxtLink to="/">四川</NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="search-result-content-back">
|
|
|
+ <span @click="returnSearchPage">返回首页>></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--查询-->
|
|
|
+ <div class="search-big-box" v-show="showResult == 0">
|
|
|
+ <div class="search-box">
|
|
|
+ <div class="search-left-box">
|
|
|
+ <div>
|
|
|
+ <span class="search-left-box-text">地区:</span>
|
|
|
+ <el-select v-model="province" placeholder="--" size="large" style="width: 180px" popper-class="custom-select-dropdown">
|
|
|
+ <el-option v-for="item in provinceList" :key="item.id" :label="item.name" @click="change(item)"
|
|
|
+ :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 180px"
|
|
|
+ popper-class="custom-select-dropdown">
|
|
|
+ <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
|
|
|
+ @click="change1(item)" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 180px"
|
|
|
+ popper-class="custom-select-dropdown">
|
|
|
+ <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.code" @click="change2(item)"/>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
- <div class="shi">
|
|
|
- <NuxtLink to="/">成都市</NuxtLink>
|
|
|
- <NuxtLink to="/">自贡市</NuxtLink>
|
|
|
- <NuxtLink to="/">攀枝花市</NuxtLink>
|
|
|
- <NuxtLink to="/">泸州市</NuxtLink>
|
|
|
- <NuxtLink to="/">德阳市</NuxtLink>
|
|
|
- <NuxtLink to="/">绵阳市</NuxtLink>
|
|
|
- <NuxtLink to="/">广元市</NuxtLink>
|
|
|
- <NuxtLink to="/">遂宁市</NuxtLink>
|
|
|
- <NuxtLink to="/">内江市</NuxtLink>
|
|
|
- <NuxtLink to="/">乐山市</NuxtLink>
|
|
|
- <NuxtLink to="/">南充市</NuxtLink>
|
|
|
- <NuxtLink to="/">眉山市</NuxtLink>
|
|
|
- <NuxtLink to="/">宜宾市</NuxtLink>
|
|
|
- <NuxtLink to="/">广安市</NuxtLink>
|
|
|
- <NuxtLink to="/">达州市</NuxtLink>
|
|
|
- <NuxtLink to="/">雅安市</NuxtLink>
|
|
|
- <NuxtLink to="/">巴中市</NuxtLink>
|
|
|
- <NuxtLink to="/">资阳市</NuxtLink>
|
|
|
- <NuxtLink to="/">阿坝藏族羌族自治州</NuxtLink>
|
|
|
- <NuxtLink to="/">甘孜藏族自治州</NuxtLink>
|
|
|
- <NuxtLink to="/">凉山彝族自治州</NuxtLink>
|
|
|
+ <button @click="getRegionInfo">搜索</button>
|
|
|
+ </div>
|
|
|
+ <div class="search-right-box">
|
|
|
+ <img src="@/public/search/dszx.png" alt="">
|
|
|
+ <div>手机扫描查询</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="search-list-box">
|
|
|
+ <div class="search-list-box-title">中心列表</div>
|
|
|
+ <div class="search-list-box-main">
|
|
|
+ <NuxtLink :to="'#' + item.id" v-for="item in provinceAbbr">{{ item.name }}</NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="search-list-box-content">
|
|
|
+ <div class="cityname" v-for="item in provinceDataList">
|
|
|
+ <div class="sheng">
|
|
|
+ <span :id="item.id">{{item.name}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="shi">
|
|
|
+ <span v-for="i in item.children" @click="gotoUrl(item.name,i.name)">{{i.name}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 页面底部 -->
|
|
|
- <HomeFoot></HomeFoot>
|
|
|
+ <!-- <HomeFoot></HomeFoot> -->
|
|
|
</template>
|
|
|
<script setup>
|
|
|
//1.页面依赖 start ---------------------------------------->
|
|
|
@@ -161,198 +132,54 @@ import { onMounted } from 'vue'
|
|
|
import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
|
|
|
import { ArrowRight } from '@element-plus/icons-vue'
|
|
|
const nuxtApp = useNuxtApp();
|
|
|
-const axios = nuxtApp.$axios;
|
|
|
-//1.1 获得跳转过来的id
|
|
|
const route = useRoute();
|
|
|
-//获得详情id
|
|
|
-const articleId = parseInt(route.params.id); //获得该页面的id
|
|
|
-//获得当前的完整路径
|
|
|
-const fullPath = route.path;
|
|
|
-//拆分,取出来中间这一段,然后提取数字部分
|
|
|
-const segments = fullPath.split('/');
|
|
|
-const targetSegment = segments[1];
|
|
|
-// const numberPart = targetSegment.match(/\d+$/)?.[0];
|
|
|
-// let routeId = 20 //排除路径错误可以打开这个
|
|
|
-// const routeId = numberPart;
|
|
|
-let routeId;
|
|
|
-//通过导航路径反向查询导航id
|
|
|
-const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
|
|
|
- method: 'GET',
|
|
|
- query: {
|
|
|
- 'pinyin': targetSegment,
|
|
|
- },
|
|
|
-});
|
|
|
-if (getRouteId.code == 200) {
|
|
|
- routeId = getRouteId.data.category_id
|
|
|
-} else {
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
- console.log("错误位置:通过url路径查询导航池id")
|
|
|
- console.log("后端错误反馈:", getRouteId.message)
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
-}
|
|
|
-//1.2 获得父级栏目的名称、id
|
|
|
-const parent_name = ref([]);
|
|
|
-const parent_id = ref([]);
|
|
|
-const parent_pinyin = ref("");
|
|
|
-const parent_children_count = ref(0)
|
|
|
-let getParentNav = async () => {
|
|
|
- const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
|
|
|
- method: 'GET',
|
|
|
- query: {
|
|
|
- 'catid': routeId
|
|
|
- },
|
|
|
- });
|
|
|
- console.log("获取父级栏目数据")
|
|
|
- console.log(listData)
|
|
|
- if (listData.code == 200) {
|
|
|
- console.log(listData.data);
|
|
|
- parent_name.value = listData.data.alias;
|
|
|
- parent_id.value = listData.data.parent_id;
|
|
|
- parent_pinyin.value = listData.data.aLIas_pinyin;
|
|
|
- parent_children_count.value = listData.data.children_count;
|
|
|
- } else {
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
- console.log("错误位置:获取面包屑导航")
|
|
|
- console.log("后端错误反馈:", listData.message)
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
- }
|
|
|
-}
|
|
|
-//获得父级栏目详情
|
|
|
-getParentNav();
|
|
|
+// const articleId = parseInt(route.params.id);
|
|
|
//1.页面依赖 end ---------------------------------------->
|
|
|
-//2.页面数据 start ---------------------------------------->
|
|
|
-//2.1 资讯详情
|
|
|
-const newsDetail = ref({})
|
|
|
-const routeNewsTtitle = ref("");
|
|
|
-//2.2 发布日期
|
|
|
-const time = ref("");
|
|
|
-//2.3 路径
|
|
|
-const routLevelTitle = ref("");
|
|
|
-const routLevelId = ref("");
|
|
|
-//是否展示投票
|
|
|
-const articleChoice = ref(false);
|
|
|
-//2.4获取详情
|
|
|
-async function getPageData() {
|
|
|
- const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
|
|
|
- method: 'GET',
|
|
|
- query: {
|
|
|
- 'articleid': articleId
|
|
|
- },
|
|
|
- });
|
|
|
- if (mkdata.code == 200) {
|
|
|
- //判断是否显示投票
|
|
|
- if (mkdata.data.is_survey == 1) {
|
|
|
- console.log("本篇文章含有投票!")
|
|
|
- articleChoice.value = true;
|
|
|
- getVoteList();
|
|
|
- }
|
|
|
- //获取内容
|
|
|
- newsDetail.value = mkdata.data;
|
|
|
- //获取路径
|
|
|
- routLevelTitle.value = newsDetail.value.cat_name;
|
|
|
- routLevelId.value = newsDetail.value.category_id;
|
|
|
- //获取发布时间
|
|
|
- time.value = newsDetail.value.updated_at.split(' ')[0];
|
|
|
- //修正标题长度
|
|
|
- if (newsDetail.value.title.length >= 30) {
|
|
|
- routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
|
|
|
- } else {
|
|
|
- routeNewsTtitle.value = newsDetail.value.title
|
|
|
- }
|
|
|
- } else {
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
- console.log("错误位置:获取详情内容")
|
|
|
- console.log("后端错误反馈:", mkdata.message)
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
- }
|
|
|
-}
|
|
|
-getPageData();
|
|
|
-//2.5 获得广告
|
|
|
-//广告列表
|
|
|
-let adImg1 = ref([]);
|
|
|
-onMounted(async () => {
|
|
|
- const { $webUrl, $CwebUrl } = useNuxtApp();
|
|
|
- //广告1
|
|
|
- let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
|
|
|
- const responseAd1 = await fetch(url, {
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'application/json',
|
|
|
- 'Userurl': $CwebUrl,
|
|
|
- 'Origin': $CwebUrl
|
|
|
- }
|
|
|
- });
|
|
|
- const resultAd1 = await responseAd1.json();
|
|
|
- adImg1.value = resultAd1.data[0];
|
|
|
-})
|
|
|
-//2.页面数据 end ---------------------------------------->
|
|
|
-//3.设置seo信息 start---------------------------------------->
|
|
|
-//3.1 设置seo信息
|
|
|
-const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
|
|
|
- method: 'GET',
|
|
|
- query: {
|
|
|
- 'articleid': articleId
|
|
|
- },
|
|
|
-});
|
|
|
-if (setData.code == 200) {
|
|
|
- let seoTitle = setData.data.title;
|
|
|
- let seoDescription = setData.data.introduce;
|
|
|
- let seoKeywords = setData.data.keyword;
|
|
|
- let seoSuffix = setData.data.suffix;
|
|
|
- let seoName = setData.data.website_name;
|
|
|
- useSeoMeta({
|
|
|
- title: seoTitle + "_" + seoName + "_" + seoSuffix,
|
|
|
- meta: [
|
|
|
- { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
|
|
|
- { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
|
|
|
- { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
|
|
|
- ]
|
|
|
- });
|
|
|
-} else {
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
- console.log("错误位置:设置详情页面SEO数据")
|
|
|
- console.log("后端错误反馈:", setData.message)
|
|
|
- console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
-}
|
|
|
-//3.设置seo信息 end---------------------------------------->
|
|
|
-//4.展示行政区划 start ---------------------------------------->
|
|
|
+//2.展示行政区划 start ---------------------------------------->
|
|
|
//let areaList = ref("")
|
|
|
-//4.1 省
|
|
|
+//2.1 省
|
|
|
let province = ref("")
|
|
|
let provinceid = ref("")
|
|
|
+let provinceName = ref("")
|
|
|
let provinceList = ref("")
|
|
|
-//4.2 市
|
|
|
+//2.2 市
|
|
|
let city = ref("")
|
|
|
let cityid = ref("")
|
|
|
+let cityName = ref("")
|
|
|
let cityList = ref("")
|
|
|
-//4.3 县
|
|
|
+//2.3 县
|
|
|
let region = ref("")
|
|
|
let regionid = ref("")
|
|
|
+let regionName = ref("")
|
|
|
let regionList = ref("")
|
|
|
//选择市
|
|
|
-let change = async (id) => {
|
|
|
- provinceid.value = id;
|
|
|
+let change = async (item) => {
|
|
|
+ provinceid.value = item.id;
|
|
|
+ provinceName.value = item.name;
|
|
|
const shengData = await requestDataPromise('/web/selectWebsiteArea', {
|
|
|
method: 'GET',
|
|
|
query: {
|
|
|
- 'pid': id,
|
|
|
+ 'pid': item.id,
|
|
|
},
|
|
|
});
|
|
|
cityList.value = shengData.data;
|
|
|
regionList.value = [];// 清空县
|
|
|
}
|
|
|
//选择县
|
|
|
-let change1 = async (id) => {
|
|
|
- cityid.value = id;
|
|
|
+let change1 = async (item) => {
|
|
|
+ cityid.value = item.id;
|
|
|
+ cityName.value = item.name;
|
|
|
const xianData = await requestDataPromise('/web/selectWebsiteArea', {
|
|
|
method: 'GET',
|
|
|
query: {
|
|
|
- 'pid': id,
|
|
|
+ 'pid': item.id,
|
|
|
},
|
|
|
});
|
|
|
regionList.value = xianData.data;
|
|
|
}
|
|
|
-let change2 = async (id) => {
|
|
|
- regionid.value = id;
|
|
|
+let change2 = async (item) => {
|
|
|
+ regionid.value = item.id;
|
|
|
+ regionName.value = item.name;
|
|
|
}
|
|
|
onMounted(async () => {
|
|
|
//从客户端获取行政区划
|
|
|
@@ -370,494 +197,721 @@ onMounted(async () => {
|
|
|
} catch (error) {
|
|
|
console.error('获取行政区划数据失败:', error);
|
|
|
}
|
|
|
- const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
|
|
|
- const parentElement = document.querySelector('.nav_in');
|
|
|
- if (targetElement && parentElement) {
|
|
|
- const targetRect = targetElement.getBoundingClientRect();
|
|
|
- const parentRect = parentElement.getBoundingClientRect();
|
|
|
- const distanceToParentLeft = targetRect.left - parentRect.left;
|
|
|
- const navigationElement = document.querySelector('.partOne .navigationOne');
|
|
|
- if (navigationElement) {
|
|
|
- navigationElement.scrollLeft = distanceToParentLeft - 66;
|
|
|
+ //获得所有地区列表
|
|
|
+ getRegionList();
|
|
|
+})
|
|
|
+//2.展示行政区划 end ---------------------------------------->
|
|
|
+//3.表单 start---------------------------------------->
|
|
|
+//显示查询结果
|
|
|
+let showResult = ref(0)//0=不显示结果 1=显示正确的查询结果 2=未查询到结果
|
|
|
+let resuluData = ref({})//负责人详情
|
|
|
+//3.1地市查询
|
|
|
+let getRegionInfo = async () => {
|
|
|
+ if(provinceName.value==""||cityName.value==""){
|
|
|
+ ElMessage.error("查询条件至少需要包含省和市!")
|
|
|
+ }else{
|
|
|
+ //获得地区详情
|
|
|
+ const regionInfo = await requestDataPromise('/public/getCity', {
|
|
|
+ method: 'POST',
|
|
|
+ body: {
|
|
|
+ 'ssxmid': 10,
|
|
|
+ 'sheng':provinceName.value,
|
|
|
+ 'shi':cityName.value,
|
|
|
+ 'qu':regionName.value
|
|
|
+ },
|
|
|
+ });
|
|
|
+ if(regionInfo.code == 200){
|
|
|
+ //查询成功
|
|
|
+ showResult.value = 2;
|
|
|
+ resuluData.value = regionInfo.data[0];
|
|
|
+ }else{
|
|
|
+ //查询失败
|
|
|
+ console.log(regionInfo.message)
|
|
|
+ showResult.value = 1;
|
|
|
}
|
|
|
}
|
|
|
-})
|
|
|
-//4.展示行政区划 end ---------------------------------------->
|
|
|
-//5.表单 start---------------------------------------->
|
|
|
-let input = ref("");
|
|
|
-let value = ref("1");
|
|
|
-const submitForm = () => {
|
|
|
- console.log(input.value)
|
|
|
- console.log(value.value)
|
|
|
}
|
|
|
-//5.表单 end---------------------------------------->
|
|
|
+//返回查询页
|
|
|
+let returnSearchPage = () => {
|
|
|
+ showResult.value = 0;
|
|
|
+ //重置名称
|
|
|
+ provinceName.value = "";
|
|
|
+ cityName.value = "";
|
|
|
+ regionName.value = "";
|
|
|
+ //重置选择的值
|
|
|
+ provinceid.value = "";
|
|
|
+ cityid.value = "";
|
|
|
+ regionid.value = "";
|
|
|
+ //重置选择器
|
|
|
+ province.value = "";
|
|
|
+ city.value = "";
|
|
|
+ region.value = "";
|
|
|
+}
|
|
|
+//跳转都网址
|
|
|
+let gotoUrl = (sheng,shi) => {
|
|
|
+ provinceName.value = sheng;
|
|
|
+ cityName.value = shi;
|
|
|
+ getRegionInfo();
|
|
|
+}
|
|
|
+//3.表单 end---------------------------------------->
|
|
|
+//4.显示地市列表 start---------------------------------------->
|
|
|
+//简称
|
|
|
+const provinceAbbr = ref([]);
|
|
|
+//地区列表
|
|
|
+const provinceDataList = ref([]);
|
|
|
+let getRegionList = async () => {
|
|
|
+ //获得地区列表
|
|
|
+ const regionList = await requestDataPromise('/web/getWebsiteProvinceCity', {
|
|
|
+ method: 'GET',
|
|
|
+ query: {},
|
|
|
+ });
|
|
|
+ if(regionList.code == 200){
|
|
|
+ //查询成功
|
|
|
+ console.log(regionList)
|
|
|
+ //获得省份简称
|
|
|
+ for(let item of regionList.data){
|
|
|
+ let provinceAbbrData = {
|
|
|
+ "name":item.abbreviation,
|
|
|
+ "id":item.id
|
|
|
+ }
|
|
|
+ provinceAbbr.value.push(provinceAbbrData);
|
|
|
+ }
|
|
|
+ provinceDataList.value = regionList.data;
|
|
|
+ }else{
|
|
|
+ //查询失败
|
|
|
+ console.log(regionList.message);
|
|
|
+ }
|
|
|
+}
|
|
|
+//4.显示地市列表 end---------------------------------------->
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-//@import url('@/assets/css/article/pc.less');
|
|
|
-//@import url('@/assets/css/article/yd.less');
|
|
|
-//面包屑
|
|
|
-.breadcrumb-box {
|
|
|
- width: 1400px;
|
|
|
- margin: 0 auto;
|
|
|
- .inner {
|
|
|
- width: 100%;
|
|
|
- height: 22px;
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 20px;
|
|
|
- color: #666666;
|
|
|
- line-height: 23px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px dashed #ccc;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 20px 20px 20px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- a {
|
|
|
- font-size: 16px;
|
|
|
- line-height: 20px;
|
|
|
- font-weight: normal !important;
|
|
|
- &:hover {
|
|
|
- color: #333
|
|
|
+ //面包屑
|
|
|
+ .breadcrumb-box {
|
|
|
+ width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .inner {
|
|
|
+ width: 100%;
|
|
|
+ height: 22px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 23px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 20px 20px 20px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ a {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-weight: normal !important;
|
|
|
+ &:hover {
|
|
|
+ color: #333
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
- line-height: 20px;
|
|
|
- &.location {
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
line-height: 20px;
|
|
|
+ &.location {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-//搜索
|
|
|
-.search-box {
|
|
|
- width: 1400px;
|
|
|
- margin: 0 auto;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- .search-left-box {
|
|
|
- width: 70%;
|
|
|
+ //搜索
|
|
|
+ .search-big-box {
|
|
|
+ width: 1400PX;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .search-box {
|
|
|
+ width: 1400PX;
|
|
|
+ margin: 0 auto;
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
- >div {
|
|
|
- width: 80%;
|
|
|
+ .search-left-box {
|
|
|
+ width: 70%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- .search-left-box-text {
|
|
|
- width: 15%;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ >div {
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .search-left-box-text {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ :deep(.el-select__placeholder) {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button {
|
|
|
+ width: 10%;
|
|
|
display: block;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #337ab7;
|
|
|
+ border-color: #2e6da4;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ user-select: none;
|
|
|
+ background-image: none;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
}
|
|
|
- :deep(.el-select__wrapper) {
|
|
|
- margin-left: 10px;
|
|
|
+ }
|
|
|
+ .search-right-box {
|
|
|
+ margin-right: 50px;
|
|
|
+ width: 20%;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
}
|
|
|
- :deep(.el-select__placeholder) {
|
|
|
- color: #000;
|
|
|
+ >div {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center
|
|
|
}
|
|
|
}
|
|
|
- >button {
|
|
|
- width: 10%;
|
|
|
- display: block;
|
|
|
- color: #fff;
|
|
|
- background-color: #337ab7;
|
|
|
- border-color: #2e6da4;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap;
|
|
|
- user-select: none;
|
|
|
- background-image: none;
|
|
|
- border: 1px solid transparent;
|
|
|
- border-radius: 4px;
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
- }
|
|
|
}
|
|
|
- .search-right-box {
|
|
|
- margin-right: 50px;
|
|
|
- width: 20%;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- >div {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.search-list-box {
|
|
|
- width: 1400px;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #ccc;
|
|
|
- margin: 30px auto;
|
|
|
- position: relative;
|
|
|
- .search-list-box-title {
|
|
|
- width: 150px;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- font-size: 30px;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- top: -25px;
|
|
|
- left: 20px;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- .search-list-box-main {
|
|
|
- width: 100%;
|
|
|
- padding: 30px;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
+ .search-list-box {
|
|
|
+ width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin: 30px auto;
|
|
|
+ position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- a {
|
|
|
- font-size: 16px;
|
|
|
- padding: 0 10px;
|
|
|
+ .search-list-box-title {
|
|
|
+ width: 150px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 30px;
|
|
|
color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: -25px;
|
|
|
+ left: 20px;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
- }
|
|
|
- .search-list-box-content {
|
|
|
- .cityname {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
+ .search-list-box-main {
|
|
|
+ width: 100%;
|
|
|
+ padding: 30px;
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
- &:last-child {
|
|
|
- border-bottom: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ a {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
}
|
|
|
- .sheng {
|
|
|
- width: 20%;
|
|
|
- text-align: center;
|
|
|
- font-size: 20px;
|
|
|
- line-height: 200%;
|
|
|
- a {
|
|
|
+ .search-list-box-content {
|
|
|
+ .cityname {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sheng {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 200%;
|
|
|
color: #337ab7;
|
|
|
}
|
|
|
- }
|
|
|
- .shi {
|
|
|
- width: 80%;
|
|
|
- height: 100%;
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
- padding: 0 5px;
|
|
|
- display: block;
|
|
|
- border-left: 1px solid #ccc;
|
|
|
- line-height: 40px;
|
|
|
- a {
|
|
|
+ .shi {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
font-size: 16px;
|
|
|
color: #000;
|
|
|
padding: 0 5px;
|
|
|
display: block;
|
|
|
- width: auto;
|
|
|
- float: left;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+ line-height: 40px;
|
|
|
+ span {
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #000;
|
|
|
+ padding: 0 5px;
|
|
|
+ display: block;
|
|
|
+ width: auto;
|
|
|
+ float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-//返回查询结果
|
|
|
-.search-result-box {
|
|
|
- width: 500px;
|
|
|
- margin: 80px auto;
|
|
|
- height: auto;
|
|
|
- overflow: hidden;
|
|
|
- border: 1px solid #ccc;
|
|
|
- .search-result-box-title {
|
|
|
- line-height: 30px;
|
|
|
- width: 488px;
|
|
|
- height: auto;
|
|
|
- overflow: hidden;
|
|
|
- padding: 6px 6px 0 6px;
|
|
|
- font-size: 15px;
|
|
|
- font-family: serif;
|
|
|
- }
|
|
|
- .search-result-box-qq {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- line-height: 30px;
|
|
|
- width: 488px;
|
|
|
+ //返回查询结果
|
|
|
+ .search-result-box {
|
|
|
+ width: 500px;
|
|
|
+ margin: 80px auto;
|
|
|
height: auto;
|
|
|
overflow: hidden;
|
|
|
- padding: 0 6px 0 6px;
|
|
|
- font-size: 15px;
|
|
|
- font-family: serif;
|
|
|
- div:nth-child(2) {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .search-result-box-title {
|
|
|
+ line-height: 30px;
|
|
|
+ width: 488px;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 6px 6px 0 6px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: serif;
|
|
|
+ }
|
|
|
+ .search-result-box-qq {
|
|
|
display: flex;
|
|
|
- margin-left: 80px;
|
|
|
- img {
|
|
|
- margin-right: 20px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 488px;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 6px 0 6px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: serif;
|
|
|
+ div:nth-child(2) {
|
|
|
+ display: flex;
|
|
|
+ margin-left: 80px;
|
|
|
+ img {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-result-box-back {
|
|
|
+ text-align: right;
|
|
|
+ width: 488px;
|
|
|
+ height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 48px;
|
|
|
+ margin: 0;
|
|
|
+ span {
|
|
|
+ color: red;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .search-result-box-back {
|
|
|
- text-align: right;
|
|
|
- width: 488px;
|
|
|
- height: 40px;
|
|
|
- overflow: hidden;
|
|
|
- line-height: 48px;
|
|
|
- margin: 0;
|
|
|
- a {
|
|
|
- color: red;
|
|
|
+ //返回查询结果
|
|
|
+ .search-result-box-content {
|
|
|
+ width: 1400PX;
|
|
|
+ margin: 0 auto;
|
|
|
+ .search-result-content-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26PX;
|
|
|
font-weight: bold;
|
|
|
- font-size: 10px;
|
|
|
+ padding-top: 30PX;
|
|
|
+ color: #337ab7;
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-.breadcrumb-box {
|
|
|
- width: 1400PX;
|
|
|
- margin: 0px auto 0px;
|
|
|
-}
|
|
|
-.el-breadcrumb {
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
-}
|
|
|
-.breadcrumb-box .inner span.location {
|
|
|
- font-size: 16PX;
|
|
|
- ;
|
|
|
- height: 22PX;
|
|
|
- ;
|
|
|
- line-height: 22PX;
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
-.breadcrumb-box .inner a {
|
|
|
- font-size: 16PX;
|
|
|
- ;
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
- display: inline-block;
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
-.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
|
|
|
- font-size: 16PX;
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
-.breadcrumb-box:deep(.el-icon) {
|
|
|
- width: 16PX;
|
|
|
- height: 16PX;
|
|
|
-}
|
|
|
-.breadcrumb-box .inner span {
|
|
|
- font-size: 16PX;
|
|
|
- ;
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
-}
|
|
|
-.search-box {
|
|
|
- width: 1400PX;
|
|
|
- .search-left-box {
|
|
|
- >div {
|
|
|
- .search-left-box-text {
|
|
|
- font-size: 16PX;
|
|
|
- word-break: keep-all;
|
|
|
- white-space: nowrap;
|
|
|
+ .search-result-content-file {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 40PX;
|
|
|
+ >div {
|
|
|
+ line-height: 40PX;
|
|
|
+ height: 40PX;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ font-size: 20PX;
|
|
|
+ width: 48%;
|
|
|
+ color: red;
|
|
|
}
|
|
|
- :deep(.el-select__wrapper) {
|
|
|
- margin-left: 10PX;
|
|
|
+ }
|
|
|
+ .search-result-content-info {
|
|
|
+ >div {
|
|
|
+ width: 120PX;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ vertical-align: middle;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #027dc3;
|
|
|
+ margin-top: 30PX;
|
|
|
+ margin-bottom: 30PX;
|
|
|
+ clear: both;
|
|
|
+ font-size: 14PX;
|
|
|
}
|
|
|
}
|
|
|
- >button {
|
|
|
- font-size: 14PX;
|
|
|
- border: 1PX solid transparent;
|
|
|
- border-radius: 4PX;
|
|
|
- height: 35PX;
|
|
|
- line-height: 35PX;
|
|
|
+ .search-result-content-table {
|
|
|
+ margin-bottom: 40PX;
|
|
|
+ .search-result-content-line-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 1PX solid #666;
|
|
|
+ div {
|
|
|
+ width: 25%;
|
|
|
+ height: 50PX;
|
|
|
+ line-height: 50PX;
|
|
|
+ border-right: 1px solid #666;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ &:last-child {
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-result-content-line-text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 1PX solid #666;
|
|
|
+ border-top: 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 25%;
|
|
|
+ height: 50PX;
|
|
|
+ line-height: 50PX;
|
|
|
+ border-right: 1px solid #666;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #000;
|
|
|
+ &:last-child {
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .search-right-box {
|
|
|
- margin-right: 50PX;
|
|
|
- >div {
|
|
|
- height: 30PX;
|
|
|
- line-height: 30PX;
|
|
|
- font-size: 16PX;
|
|
|
+ .search-result-content-back {
|
|
|
+ text-align: right;
|
|
|
+ span {
|
|
|
+ color: red;
|
|
|
+ font-size: 14PX;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.search-list-box {
|
|
|
- width: 1400PX;
|
|
|
- border: 1PX solid #ccc;
|
|
|
- margin: 30PX auto;
|
|
|
- .search-list-box-title {
|
|
|
- width: 150PX;
|
|
|
- height: 50PX;
|
|
|
- line-height: 50PX;
|
|
|
- font-size: 30PX;
|
|
|
- top: -25PX;
|
|
|
- left: 20PX;
|
|
|
+ .breadcrumb-box {
|
|
|
+ width: 1400PX;
|
|
|
+ margin: 0px auto 0px;
|
|
|
}
|
|
|
- .search-list-box-main {
|
|
|
- padding: 30PX;
|
|
|
- border-bottom: 1PX solid #ccc;
|
|
|
- a {
|
|
|
- font-size: 16PX;
|
|
|
- padding: 0 10PX;
|
|
|
- }
|
|
|
+ .el-breadcrumb {
|
|
|
+ height: 22PX;
|
|
|
+ line-height: 22PX;
|
|
|
+ }
|
|
|
+ .breadcrumb-box .inner span.location {
|
|
|
+ font-size: 16PX;
|
|
|
+ ;
|
|
|
+ height: 22PX;
|
|
|
+ ;
|
|
|
+ line-height: 22PX;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .breadcrumb-box .inner a {
|
|
|
+ font-size: 16PX;
|
|
|
+ ;
|
|
|
+ height: 22PX;
|
|
|
+ line-height: 22PX;
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
|
|
|
+ font-size: 16PX;
|
|
|
+ height: 22PX;
|
|
|
+ line-height: 22PX;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .breadcrumb-box:deep(.el-icon) {
|
|
|
+ width: 16PX;
|
|
|
+ height: 16PX;
|
|
|
+ }
|
|
|
+ .breadcrumb-box .inner span {
|
|
|
+ font-size: 16PX;
|
|
|
+ ;
|
|
|
+ height: 22PX;
|
|
|
+ line-height: 22PX;
|
|
|
}
|
|
|
- .search-list-box-content {
|
|
|
- .cityname {
|
|
|
- border-bottom: 1PX solid #ccc;
|
|
|
+ .search-box {
|
|
|
+ width: 1400PX;
|
|
|
+ .search-left-box {
|
|
|
+ >div {
|
|
|
+ .search-left-box-text {
|
|
|
+ font-size: 16PX;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ margin-left: 10PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button {
|
|
|
+ font-size: 14PX;
|
|
|
+ border: 1PX solid transparent;
|
|
|
+ border-radius: 4PX;
|
|
|
+ height: 35PX;
|
|
|
+ line-height: 35PX;
|
|
|
+ }
|
|
|
}
|
|
|
- .sheng {
|
|
|
- font-size: 20PX;
|
|
|
+ .search-right-box {
|
|
|
+ margin-right: 50PX;
|
|
|
+ >div {
|
|
|
+ height: 30PX;
|
|
|
+ line-height: 30PX;
|
|
|
+ font-size: 16PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-list-box {
|
|
|
+ width: 1400PX;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ margin: 30PX auto;
|
|
|
+ .search-list-box-title {
|
|
|
+ width: 150PX;
|
|
|
+ height: 50PX;
|
|
|
+ line-height: 50PX;
|
|
|
+ font-size: 30PX;
|
|
|
+ top: -25PX;
|
|
|
+ left: 20PX;
|
|
|
}
|
|
|
- .shi {
|
|
|
- font-size: 16PX;
|
|
|
- padding: 0 5PX;
|
|
|
- border-left: 1PX solid #ccc;
|
|
|
- line-height: 40PX;
|
|
|
+ .search-list-box-main {
|
|
|
+ padding: 30PX;
|
|
|
+ border-bottom: 1PX solid #ccc;
|
|
|
a {
|
|
|
+ font-size: 16PX;
|
|
|
+ padding: 0 10PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-list-box-content {
|
|
|
+ .cityname {
|
|
|
+ border-bottom: 1PX solid #ccc;
|
|
|
+ }
|
|
|
+ .sheng {
|
|
|
+ font-size: 20PX;
|
|
|
+ }
|
|
|
+ .shi {
|
|
|
font-size: 16PX;
|
|
|
padding: 0 5PX;
|
|
|
+ border-left: 1PX solid #ccc;
|
|
|
+ line-height: 40PX;
|
|
|
+ a {
|
|
|
+ font-size: 16PX;
|
|
|
+ padding: 0 5PX;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-//返回查询结果
|
|
|
-.search-result-box {
|
|
|
- width: 500PX;
|
|
|
- margin: 80PX auto;
|
|
|
- border: 1PX solid #ccc;
|
|
|
- .search-result-box-title {
|
|
|
- line-height: 30PX;
|
|
|
- width: 488PX;
|
|
|
- padding: 6PX 6PX 0 6PX;
|
|
|
- font-size: 15PX;
|
|
|
- }
|
|
|
- .search-result-box-qq {
|
|
|
- line-height: 30PX;
|
|
|
- width: 488PX;
|
|
|
- padding: 0 6PX 0 6PX;
|
|
|
- font-size: 15PX;
|
|
|
- div:nth-child(2) {
|
|
|
- margin-left: 80PX;
|
|
|
- img {
|
|
|
- margin-right: 20PX;
|
|
|
+ //返回查询结果
|
|
|
+ .search-result-box {
|
|
|
+ width: 500PX;
|
|
|
+ margin: 80PX auto;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ .search-result-box-title {
|
|
|
+ line-height: 30PX;
|
|
|
+ width: 488PX;
|
|
|
+ padding: 6PX 6PX 0 6PX;
|
|
|
+ font-size: 15PX;
|
|
|
+ }
|
|
|
+ .search-result-box-qq {
|
|
|
+ line-height: 30PX;
|
|
|
+ width: 488PX;
|
|
|
+ padding: 0 6PX 0 6PX;
|
|
|
+ font-size: 15PX;
|
|
|
+ div:nth-child(2) {
|
|
|
+ margin-left: 80PX;
|
|
|
+ img {
|
|
|
+ margin-right: 20PX;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .search-result-box-back {
|
|
|
- width: 488PX;
|
|
|
- height: 40PX;
|
|
|
- line-height: 48PX;
|
|
|
- a {
|
|
|
- font-size: 10PX;
|
|
|
+ .search-result-box-back {
|
|
|
+ width: 488PX;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 48PX;
|
|
|
+ a {
|
|
|
+ font-size: 10PX;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-@media screen and (min-width: 1401px) {
|
|
|
- //你的样式
|
|
|
-}
|
|
|
-@media screen and (max-width: 1400px) {
|
|
|
- .breadcrumb-box {
|
|
|
- width: 100%;
|
|
|
- margin: 0px auto 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
- }
|
|
|
- .newsList {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
- margin: 0px auto 0px;
|
|
|
- }
|
|
|
- .search-box {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
- margin: 0px auto 0px;
|
|
|
- }
|
|
|
- .search-box .search-left-box>button {
|
|
|
- width: 111px;
|
|
|
- margin-left: 11PX;
|
|
|
- }
|
|
|
- .search-list-box {
|
|
|
- width: 96%;
|
|
|
- margin: 0px auto 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (min-width: 801px) and (max-width: 1400px) {
|
|
|
- //你的样式
|
|
|
- .search-box {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
- margin: 0px auto 0px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width: 800px) {
|
|
|
- //你的样式
|
|
|
- .search-box {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .search-box .search-right-box {
|
|
|
- margin: 4px auto 0px;
|
|
|
- width: 222PX;
|
|
|
- }
|
|
|
- :deep(.el-select--large) .el-select__wrapper {
|
|
|
- padding: 4PX 6PX;
|
|
|
- }
|
|
|
- :deep(.el-select__selection) {
|
|
|
- min-width: 50PX;
|
|
|
- }
|
|
|
- .search-box .search-left-box>div {
|
|
|
- width: 100%;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .search-box .search-left-box>div>* {
|
|
|
- float: left;
|
|
|
- width: auto !important;
|
|
|
+ .breadcrumb-box .inner {
|
|
|
+ height: 22PX;
|
|
|
+ line-height: 22PX;
|
|
|
+ padding: 20PX 20PX 20PX 0;
|
|
|
}
|
|
|
- .search-box .search-left-box>div :deep(.el-select__wrapper) {
|
|
|
- width: 90PX;
|
|
|
+ .search-left-box :deep(.el-select .el-select__wrapper) {
|
|
|
+ min-height: 40PX !important;
|
|
|
+ height: 40PX !important;
|
|
|
+ padding: 10PX 10PX;
|
|
|
+ font-size: 14PX;
|
|
|
}
|
|
|
- .search-box .search-left-box {
|
|
|
- width: 100%;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
+ .custom-select-dropdown .el-select-dropdown__item {
|
|
|
+ height: 33PX;
|
|
|
+ line-height: 33PX;
|
|
|
+ font-size: 14PX;
|
|
|
}
|
|
|
- .search-box .search-left-box>button {
|
|
|
- margin: 11PX auto 0px;
|
|
|
+ .search-left-box :deep(.el-select__caret) {
|
|
|
+ font-size: 18PX;
|
|
|
}
|
|
|
- .search-result-box {
|
|
|
- width: 90%;
|
|
|
- margin: 30px auto;
|
|
|
+ @media screen and (min-width: 1401px) {
|
|
|
+ //你的样式
|
|
|
}
|
|
|
- .search-result-box .search-result-box-title {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .search-list-box {
|
|
|
- width: 96%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
- margin: 55PX auto 0px;
|
|
|
+ @media screen and (max-width: 1400px) {
|
|
|
+ .breadcrumb-box {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0px auto 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 10px;
|
|
|
+ }
|
|
|
+ .newsList {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin: 0px auto 0px;
|
|
|
+ }
|
|
|
+ .search-box {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin: 0px auto 0px;
|
|
|
+ }
|
|
|
+ .search-box .search-left-box>button {
|
|
|
+ width: 111px;
|
|
|
+ margin-left: 11PX;
|
|
|
+ }
|
|
|
+ .search-list-box {
|
|
|
+ width: 96%;
|
|
|
+ margin: 0px auto 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 10px;
|
|
|
+ }
|
|
|
+ .search-big-box {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 10px;
|
|
|
+ }
|
|
|
+ .search-list-box {
|
|
|
+ margin-top: 22px;
|
|
|
+ }
|
|
|
}
|
|
|
- .search-result-box .search-result-box-back {
|
|
|
- width: 97%;
|
|
|
+ @media screen and (min-width: 801px) and (max-width: 1400px) {
|
|
|
+ //你的样式
|
|
|
+ .search-box {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin: 0px auto 0px;
|
|
|
+ }
|
|
|
}
|
|
|
- .search-result-box .search-result-box-qq div:nth-child(2) {
|
|
|
- margin-left: 0px;
|
|
|
+ @media screen and (max-width: 800px) {
|
|
|
+ //你的样式
|
|
|
+ .search-box {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .search-box .search-right-box {
|
|
|
+ margin: 4px auto 0px;
|
|
|
+ width: 55%;
|
|
|
+ }
|
|
|
+ :deep(.el-select--large) .el-select__wrapper {
|
|
|
+ padding: 4PX 6PX;
|
|
|
+ }
|
|
|
+ :deep(.el-select__selection) {
|
|
|
+ min-width: 50PX;
|
|
|
+ }
|
|
|
+ .search-box .search-left-box>div {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .search-box .search-left-box>div>* {
|
|
|
+ float: left;
|
|
|
+ width: auto !important;
|
|
|
+ }
|
|
|
+ .search-box .search-left-box>div :deep(.el-select__wrapper) {
|
|
|
+ width: 90PX;
|
|
|
+ }
|
|
|
+ .search-box .search-left-box {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .search-box .search-left-box>button {
|
|
|
+ margin: 22px auto;
|
|
|
+ }
|
|
|
+ .search-result-box {
|
|
|
+ width: 90%;
|
|
|
+ margin: 30px auto;
|
|
|
+ }
|
|
|
+ .search-result-box .search-result-box-title {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .search-list-box {
|
|
|
+ width: 96%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin: 55PX auto 0px;
|
|
|
+ }
|
|
|
+ .search-result-box .search-result-box-back {
|
|
|
+ width: 97%;
|
|
|
+ }
|
|
|
+ .search-result-box .search-result-box-qq div:nth-child(2) {
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+ .search-left-box :deep(.el-select .el-select__wrapper) {
|
|
|
+ min-height: 50px !important;
|
|
|
+ height: 50px !important;
|
|
|
+ padding: 10px 10px;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ .search-list-box .search-list-box-title {
|
|
|
+ width: 150px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 30px;
|
|
|
+ top: -25px;
|
|
|
+ left: 20px;
|
|
|
+ }
|
|
|
+ .search-box .search-left-box>div .search-left-box-text {
|
|
|
+ font-size: 26px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .search-list-box .search-list-box-main {
|
|
|
+ padding: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .search-list-box .search-list-box-main a {
|
|
|
+ font-size: 28px;
|
|
|
+ padding: 11px 11px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .search-list-box .search-list-box-content .sheng {
|
|
|
+ font-size: 28px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .search-list-box .search-list-box-content .shi span {
|
|
|
+ font-size: 26px;
|
|
|
+ padding: 10px 11px 0px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|