Skip to content

T
ty_patentSys
Commit f24b7e9f by heshihao
Options

feat: 修改界面展示不一致问题

parent 0600c062
Showing with 194 additions and 172 deletions
src/App.vue
......@@ -4,7 +4,6 @@
<router-link to="/about">About</router-link>
</div>
<router-view/> -->
<router-view />
</template>
......@@ -14,7 +13,7 @@ export default {};
<style lang="less">
#app {
// height: 100%;
height: 100%;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......
src/main.js
......@@ -3,7 +3,7 @@ import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from "ant-design-vue";
// import "./utils/rem";
import "./utils/rem";
import "ant-design-vue/dist/antd.css";
createApp(App).use(store).use(Antd).use(router).mount("#app");
src/utils/rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 16
const baseSize = 16;
// 设置 rem 函数
function setRem () {
function setRem() {
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
const scale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem()
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
\ No newline at end of file
setRem();
};
src/views/company/companyDetails.vue
......@@ -1230,7 +1230,7 @@ export default {
<style lang="less" scoped>
.details {
padding: 0 30px;
width: calc(100% - 80px);
width: calc(100%);
background-color: #ebebeb;
position: relative;
......
src/views/company/companyProfile.vue
<template>
<div>
<div style="background: #f3f3f3">
<div class="company_con">
<div class="company_con_left">
<!-- 工商信息 -->
......@@ -261,6 +261,7 @@ export default {
display: flex;
justify-content: flex-start;
background-color: #f3f3f6;
width: 1240px;
.company_con_left {
.company_con1 {
// width: 1400px;
......
src/views/company/cooperation.vue
<template>
<div>
<div style="background: #f3f3f6">
<div class="company_con">
<div class="company_con_left">
<!-- 联合申请 -->
......@@ -253,6 +253,7 @@ export default {
display: flex;
justify-content: flex-start;
background-color: #f3f3f6;
width: 1240px;
.color {
color: #53a7f0;
}
......
src/views/company/overview.vue
<template>
<div ref="overview">
<div ref="overview" style="background: #f3f3f3">
<div class="company_con">
<div class="company_con_left">
<!-- 研发规模 -->
......@@ -551,6 +551,8 @@ export default {
display: flex;
justify-content: flex-start;
background-color: #f3f3f6;
width: 1240px;
.company_con_left {
.company_con1 {
// width: 1400px;
......
src/views/company/technology.vue
<template>
<div>
<div style="background: #f3f3f3;">
<div class="company_con">
<div class="company_con_left">
<!-- 科创能力分析 -->
......@@ -222,6 +222,7 @@ export default {
display: flex;
justify-content: flex-start;
background-color: #f3f3f6;
width: 1240px;
.company_con_left {
.company_con1 {
// width: 1400px;
......@@ -231,6 +232,8 @@ export default {
opacity: 1;
padding: 40px 30px;
margin: 15px 0;
box-sizing: border-box;
.title {
color: #1c1c28;
font-size: 18px;
......
src/views/home/home.vue
......@@ -438,7 +438,7 @@ export default {
</script>
<style lang="less" scoped>
.home {
// height: calc(100% - 80px);
height: calc(100% - 65px);
.home_main {
// height: 100%;
// width: 100%;
......@@ -457,7 +457,7 @@ export default {
}
.home_search {
// width: 1820px;
width: calc(100%);
width: 1777px;
height: 308px;
position: relative;
background: url("~@/static/home/index/img-index01.png") no-repeat;
......
src/views/home/index.vue
......@@ -161,13 +161,13 @@ export default {
</script>
<style lang="less" scoped>
.home {
height: 100%;
height: calc(100% - 65px);
width: calc(100%);
position: relative;
.home_main {
height: 100%;
min-height: 900px;
height: calc(100% - 65px);
min-height: calc(100vh - 65px);
width: 100%;
background-color: #ebebeb;
display: flex;
......
src/views/login/admin.vue
......@@ -168,7 +168,7 @@ export default {
}
}
.header_right {
padding: 0 200px 30px;
padding: 0 300px 30px;
.email {
padding: 0 15px;
border-left: #5271e9 8px solid;
......@@ -185,9 +185,12 @@ export default {
}
}
.con {
height: calc(100vh - 160px);
display: flex;
justify-content: space-evenly;
margin: 100px auto 40px;
justify-content: space-around;
align-items: center;
margin: auto;
width: 1560px;
.con_left {
// width: 40%;
// margin-right: -20%;
......@@ -205,12 +208,12 @@ export default {
}
.con_left_img {
img {
width: 70%;
width: 660px;
}
}
}
.con_right {
width: 28%;
width: 620px;
height: 600px;
border-radius: 8px;
background-color: #fff;
......
src/views/login/forget.vue
......@@ -254,7 +254,7 @@ export default {
}
}
.header_right {
padding: 0 200px 30px;
padding: 0 300px 30px;
.email {
padding: 0 15px;
border-left: #5271e9 8px solid;
......@@ -271,12 +271,16 @@ export default {
}
}
.con {
height: calc(100vh - 160px);
display: flex;
justify-content: space-evenly;
margin: 100px auto 40px;
justify-content: space-around;
align-items: center;
margin: auto;
width: 1560px;
.con_left {
width: 40%;
margin-right: -20%;
// width: 40%;
// margin-right: -20%;
.title1 {
color: #4079ff;
font-family: "jiangcheng";
......@@ -291,12 +295,12 @@ export default {
}
.con_left_img {
img {
width: 70%;
width: 660px;
}
}
}
.con_right {
width: 28%;
width: 620px;
height: 600px;
border-radius: 8px;
background-color: #fff;
......
src/views/login/index.vue
......@@ -173,7 +173,7 @@ export default {
.login {
height: 100%;
background-color: #fafbfe;
// min-height: 900px;
min-height: 900px;
background-image: url("../../static/login/img-bg.png");
background-size: 100% 100%;
header {
......@@ -191,7 +191,7 @@ export default {
}
}
.header_right {
padding: 0 200px 30px;
padding: 0 300px 30px;
.email {
padding: 0 15px;
border-left: #5271e9 8px solid;
......@@ -208,9 +208,13 @@ export default {
}
}
.con {
height: calc(100vh - 160px);
display: flex;
justify-content: space-evenly;
margin: 100px auto 40px;
justify-content: space-around;
align-items: center;
margin: auto;
width: 1560px;
.con_left {
// width: 40%;
// margin-right: -20%;
......@@ -228,12 +232,12 @@ export default {
}
.con_left_img {
img {
width: 70%;
width: 600px;
}
}
}
.con_right {
width: 28%;
width: 580px;
height: 600px;
border-radius: 8px;
background-color: #fff;
......
src/views/patent/index.vue
......@@ -110,6 +110,7 @@
:pagination="false"
:customRow="rowClick"
v-if="!search_word"
:scroll="scroll"
>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">
......@@ -176,12 +177,13 @@ export default {
rangetime1: [],
rangetime2: [],
},
scroll: { y: 600 },
columns: [
{
title: "专利号",
dataIndex: "gkh",
key: "gkh",
width: 180,
width: 140,
},
{
title: "专利标题",
......@@ -195,14 +197,14 @@ export default {
dataIndex: "zlr",
key: "zlr",
ellipsis: true,
width: 180,
width: 140,
},
{
title: "发明人",
dataIndex: "fmr",
key: "fmr",
ellipsis: true,
width: 180,
// ellipsis: true,
width: 140,
},
{
title: "公开日",
......@@ -438,6 +440,14 @@ export default {
this.keyword = searchValue.keyword;
this.Filter();
}
if (window.innerHeight >= 960) {
this.scroll.y = 580;
} else if (window.innerHeight < 960 && window.innerHeight >= 800) {
this.scroll.y = 480;
} else {
this.scroll.y = 400;
}
},
beforeMount() {},
computed: {},
......@@ -512,7 +522,7 @@ export default {
padding: 0 30px;
width: calc(100%);
// height: calc(100% - 65px);
min-height: 900px;
min-height: 890px;
background-color: #ebebeb;
position: relative;
.nav_bread {
......
src/views/screen/index.vue
<template>
<v-scale-screen width="1920" height="960">
<div class="screen">
<header>太原理工大学专利成果转移转化仪表盘</header>
<div class="center">
<div class="center_left">
<patentType></patentType>
</div>
<div class="center_map">
<patentMap></patentMap>
<!-- <v-scale-screen width="1920" height="960"> -->
<div class="screen">
<header>太原理工大学专利成果转移转化仪表盘</header>
<div class="center">
<div class="center_left">
<patentType></patentType>
</div>
<div class="center_map">
<patentMap></patentMap>
</div>
<div class="center_right">
<patentPerson></patentPerson>
</div>
</div>
<div class="bottom">
<div class="bottom_echart">
<div class="bottom_title">
<span>专利发展趋势图</span>
<div class="bottom_title_btn">
<span :class="[activeTrend == 'apply_num' ? 'active' : '']" @click="changetrend('apply_num')">申请量</span>
<span :class="[activeTrend == 'publish_num' ? 'active' : '']" @click="changetrend('publish_num')"
>公布量</span
>
<span :class="[activeTrend == 'authorize_num' ? 'active' : '']" @click="changetrend('authorize_num')"
>授权量</span
>
<a-select
ref="select"
v-model:value="trend_year"
style="width: 120px"
:options="yearOptions"
@change="handleChange"
>
</a-select>
</div>
</div>
<div class="center_right">
<patentPerson></patentPerson>
<div class="echarts_container">
<EchartsCon :id="'patent_trend'" :option="option5" v-if="option5"></EchartsCon>
</div>
</div>
<div class="bottom">
<div class="bottom_echart">
<div class="bottom_title">
<span>专利发展趋势图</span>
<div class="bottom_title_btn">
<span :class="[activeTrend == 'apply_num' ? 'active' : '']" @click="changetrend('apply_num')"
>申请量</span
<div class="bottom_echart">
<div class="bottom_title">
<span>专利产业布局分布（山西十大产业）</span>
</div>
<div class="rank_con">
<div class="rank_con_left">
<div class="rank_progress" v-for="item in rankArr.slice(0, 5)">
<span class="index1 index" v-if="item.index == '1'">{{ item.index }}</span>
<span class="index2 index" v-else-if="item.index == '2'">{{ item.index }}</span>
<span class="index3 index" v-else-if="item.index == '3'">{{ item.index }}</span>
<span class="index4 index" v-else>{{ item.index }}</span>
<span class="name1 name" :title="item.name" v-if="item.index == '1'">{{ item.name }}</span>
<span class="name2 name" :title="item.name" v-else-if="item.index == '2'">{{ item.name }}</span>
<span class="name3 name" :title="item.name" v-else-if="item.index == '3'">{{ item.name }}</span>
<span class="name4 name" :title="item.name" v-else>{{ item.name }}</span>
<a-progress
v-if="item.index == '1'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor1"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
<span :class="[activeTrend == 'publish_num' ? 'active' : '']" @click="changetrend('publish_num')"
>公布量</span
</a-progress>
<a-progress
v-else-if="item.index == '2'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor2"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
<span :class="[activeTrend == 'authorize_num' ? 'active' : '']" @click="changetrend('authorize_num')"
>授权量</span
</a-progress>
<a-progress
v-else-if="item.index == '3'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor3"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
<a-select
ref="select"
v-model:value="trend_year"
style="width: 120px"
:options="yearOptions"
@change="handleChange"
</a-progress>
<a-progress
v-else
class="progress"
:percent="item.percent"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-select>
</a-progress>
<span class="num1 num" v-if="item.index == '1'">{{ item.value }}个</span>
<span class="num2 num" v-else-if="item.index == '2'">{{ item.value }}个</span>
<span class="num3 num" v-else-if="item.index == '3'">{{ item.value }}个</span>
<span class="num4 num" v-else>{{ item.value }}个</span>
</div>
</div>
<div class="echarts_container">
<EchartsCon :id="'patent_trend'" :option="option5" v-if="option5"></EchartsCon>
</div>
</div>
<div class="bottom_echart">
<div class="bottom_title">
<span>专利产业布局分布（山西十大产业）</span>
</div>
<div class="rank_con">
<div class="rank_con_left">
<div class="rank_progress" v-for="item in rankArr.slice(0, 5)">
<span class="index1 index" v-if="item.index == '1'">{{ item.index }}</span>
<span class="index2 index" v-else-if="item.index == '2'">{{ item.index }}</span>
<span class="index3 index" v-else-if="item.index == '3'">{{ item.index }}</span>
<span class="index4 index" v-else>{{ item.index }}</span>
<span class="name1 name" :title="item.name" v-if="item.index == '1'">{{ item.name }}</span>
<span class="name2 name" :title="item.name" v-else-if="item.index == '2'">{{ item.name }}</span>
<span class="name3 name" :title="item.name" v-else-if="item.index == '3'">{{ item.name }}</span>
<span class="name4 name" :title="item.name" v-else>{{ item.name }}</span>
<a-progress
v-if="item.index == '1'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor1"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index == '2'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor2"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else-if="item.index == '3'"
class="progress"
:percent="item.percent"
:stroke-color="gradientColor3"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<a-progress
v-else
class="progress"
:percent="item.percent"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<span class="num1 num" v-if="item.index == '1'">{{ item.value }}个</span>
<span class="num2 num" v-else-if="item.index == '2'">{{ item.value }}个</span>
<span class="num3 num" v-else-if="item.index == '3'">{{ item.value }}个</span>
<span class="num4 num" v-else>{{ item.value }}个</span>
</div>
</div>
<div class="rank_con_right">
<div class="rank_progress" v-for="item in rankArr.slice(5, 10)">
<span class="index4 index">{{ item.index }}</span>
<span class="name4 name" :title="item.name">{{ item.name }}</span>
<a-progress
class="progress"
:percent="item.percent"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<span class="num4 num">{{ item.value }}个</span>
</div>
<div class="rank_con_right">
<div class="rank_progress" v-for="item in rankArr.slice(5, 10)">
<span class="index4 index">{{ item.index }}</span>
<span class="name4 name" :title="item.name">{{ item.name }}</span>
<a-progress
class="progress"
:percent="item.percent"
:stroke-color="gradientColor4"
:trail-color="'rgba(19, 40, 71, 1)'"
:show-info="false"
:stroke-linecap="'round'"
>
</a-progress>
<span class="num4 num">{{ item.value }}个</span>
</div>
</div>
</div>
</div>
</div>
</v-scale-screen>
</div>
<!-- </v-scale-screen> -->
</template>
<script>
import { patentDevelop, patentIndustryTopN } from "@/utils/screen.js";
......@@ -468,7 +466,7 @@ export default {
background-image: url("../../static/screen/bg-all.png");
background-size: 100% 100%;
width: 100%;
height: 960px;
height: 100vh;
overflow: auto;
// height: 885px;
header {
......
vue.config.js
......@@ -2,14 +2,14 @@ const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
// 引入等比适配插件
// const px2rem = require("postcss-px2rem");
// 引入等比适配插件;
const px2rem = require("postcss-px2rem");
// // 配置基本大小
// const postcss = px2rem({
// // 基准大小 baseSize，需要和rem.js中相同
// remUnit: 16,
// });
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16,
});
module.exports = {
devServer: {
......@@ -41,14 +41,12 @@ module.exports = {
return args;
});
},
// css: {
// loaderOptions: {
// postcss: {
// plugins: [
// // postcss
// ],
// },
// },
// },
css: {
loaderOptions: {
postcss: {
plugins: [postcss],
},
},
},
lintOnSave: true,
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment