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

f24b7e9f · heshihao · 0600c062 · f24b7e9f · f24b7e9f · f24b7e9f
Commit f24b7e9f authored Feb 26, 2024 by heshihao
16 changed files
--- a/src/App.vue
+++ b/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;

--- a/src/main.js
+++ b/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");
--- a/src/utils/rem.js
+++ b/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()
+  setRem();
-}
+};
\ No newline at end of file
--- a/src/views/company/companyDetails.vue
+++ b/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;

--- a/src/views/company/companyProfile.vue
+++ b/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;

--- a/src/views/company/cooperation.vue
+++ b/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;
  }

--- a/src/views/company/overview.vue
+++ b/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;

--- a/src/views/company/technology.vue
+++ b/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;

--- a/src/views/home/home.vue
+++ b/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;

--- a/src/views/home/index.vue
+++ b/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%;
+    height: calc(100% - 65px);
-    min-height: 900px;
+    min-height: calc(100vh - 65px);
    width: 100%;
    background-color: #ebebeb;
    display: flex;

--- a/src/views/login/admin.vue
+++ b/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;
+    justify-content: space-around;
-    margin: 100px auto 40px;
+    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;

--- a/src/views/login/forget.vue
+++ b/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;
+    justify-content: space-around;
-    margin: 100px auto 40px;
+    align-items: center;
+    margin: auto;
+    width: 1560px;
    .con_left {
-      width: 40%;
+      // width: 40%;
-      margin-right: -20%;
+      // 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;

--- a/src/views/login/index.vue
+++ b/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;
+    justify-content: space-around;
-    margin: 100px auto 40px;
+    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;

--- a/src/views/patent/index.vue
+++ b/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,
+          // ellipsis: true,
-          width: 180,
+          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 {

--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
--- a/vue.config.js
+++ b/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({
+const postcss = px2rem({
-//   // 基准大小 baseSize，需要和rem.js中相同
+  // 基准大小 baseSize，需要和rem.js中相同
-//   remUnit: 16,
+  remUnit: 16,
-// });
+});
 module.exports = {
  devServer: {
@@ -41,14 +41,12 @@ module.exports = {
      return args;
    });
  },
-  // css: {
+  css: {
-  //   loaderOptions: {
+    loaderOptions: {
-  //     postcss: {
+      postcss: {
-  //       plugins: [
+        plugins: [postcss],
-  //         // postcss
+      },
-  //       ],
+    },
-  //     },
+  },
-  //   },
-  // },
  lintOnSave: true,
 };