diff --git a/src/assets/image/industrySolutions/3-1智能轮胎.png b/src/assets/image/industrySolutions/3-1智能轮胎.png new file mode 100755 index 0000000..b6f7f48 Binary files /dev/null and b/src/assets/image/industrySolutions/3-1智能轮胎.png differ diff --git a/src/assets/image/industrySolutions/3-2轮胎工厂.png b/src/assets/image/industrySolutions/3-2轮胎工厂.png new file mode 100755 index 0000000..70a0534 Binary files /dev/null and b/src/assets/image/industrySolutions/3-2轮胎工厂.png differ diff --git a/src/assets/image/industrySolutions/3-3快递物流.png b/src/assets/image/industrySolutions/3-3快递物流.png new file mode 100755 index 0000000..d6f404b Binary files /dev/null and b/src/assets/image/industrySolutions/3-3快递物流.png differ diff --git a/src/assets/image/industrySolutions/3-4畜牧食品.png b/src/assets/image/industrySolutions/3-4畜牧食品.png new file mode 100755 index 0000000..1f282f2 Binary files /dev/null and b/src/assets/image/industrySolutions/3-4畜牧食品.png differ diff --git a/src/assets/image/industrySolutions/3-5新能源.png b/src/assets/image/industrySolutions/3-5新能源.png new file mode 100755 index 0000000..53a2943 Binary files /dev/null and b/src/assets/image/industrySolutions/3-5新能源.png differ diff --git a/src/assets/image/industrySolutions/3-6智能制造.png b/src/assets/image/industrySolutions/3-6智能制造.png new file mode 100755 index 0000000..c0c3033 Binary files /dev/null and b/src/assets/image/industrySolutions/3-6智能制造.png differ diff --git a/src/assets/image/industrySolutions/3-7工业物联.png b/src/assets/image/industrySolutions/3-7工业物联.png new file mode 100755 index 0000000..4bd95c6 Binary files /dev/null and b/src/assets/image/industrySolutions/3-7工业物联.png differ diff --git a/src/assets/image/serviceSupport/5-1联系我们.png b/src/assets/image/serviceSupport/5-1联系我们.png new file mode 100755 index 0000000..de664f2 Binary files /dev/null and b/src/assets/image/serviceSupport/5-1联系我们.png differ diff --git a/src/assets/image/serviceSupport/5-2加入我们.png b/src/assets/image/serviceSupport/5-2加入我们.png new file mode 100755 index 0000000..cdd88f4 Binary files /dev/null and b/src/assets/image/serviceSupport/5-2加入我们.png differ diff --git a/src/components/el/industrySolutionsEl/el2.vue b/src/components/el/industrySolutionsEl/el2.vue index 49f398b..9aa6145 100644 --- a/src/components/el/industrySolutionsEl/el2.vue +++ b/src/components/el/industrySolutionsEl/el2.vue @@ -7,8 +7,8 @@
-
-
+
+
@@ -26,23 +26,23 @@
-
-
+
+
-
+
- \ No newline at end of file + diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue index 6949f9b..e7a425d 100644 --- a/src/components/menu/index.vue +++ b/src/components/menu/index.vue @@ -120,14 +120,18 @@ export default { vertical-align: top; line-height: @top-height; font-size: 1.1vw; - padding: 0 2vw; cursor: pointer; user-select: none; position: relative; color: #666; + .menuItem { + padding: 0 2vw; + } .active { - color: #000; + color: #3474FC; + font-weight: 600; + background-color: #EAF2FF; &::after { content: ''; @@ -136,7 +140,7 @@ export default { height: 2px; bottom: 0; left: 0; - background-color: #419EFF; + background-color: #3474FC; } } diff --git a/src/layout/index.vue b/src/layout/index.vue index 6bd5330..2d94e1d 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -144,9 +144,9 @@ export default { .FloatingWindow { z-index: 999; position: fixed; - bottom: 25%; + bottom: 10%; right: 0; - transform: translateY(-50%); + //transform: translateY(-50%); .item { margin-bottom: 1px; diff --git a/src/views/contactUs/index.vue b/src/views/contactUs/index.vue index 5c0d622..a03270d 100644 --- a/src/views/contactUs/index.vue +++ b/src/views/contactUs/index.vue @@ -276,7 +276,7 @@ export default { box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1); .content { - width: 100%; + width: 62vw; position: relative; left: 19%; bottom: 0; diff --git a/src/views/industrySolutions/index.vue b/src/views/industrySolutions/index.vue index 6fce3c5..8b58be0 100644 --- a/src/views/industrySolutions/index.vue +++ b/src/views/industrySolutions/index.vue @@ -3,7 +3,7 @@ @@ -11,7 +11,8 @@
+ :style="{width:`calc(${widthArr[k]}% - 2vw)`,fontSize:`${tabsFontSize}vw`}" + :class="`tab ${tabsActive == i.id ? 'active':''}`" v-for="(i,k) in tabsData"> {{ i.title }}
@@ -81,8 +82,19 @@ import Swiper from 'swiper'; import {Autoplay, Navigation} from "swiper/modules"; import TitleGroup from "@/components/TitleGroup.vue"; import Page from "@/views/page/index.vue"; +import img1 from '@/assets/image/industrySolutions/3-1智能轮胎.png'; +import img2 from '@/assets/image/industrySolutions/3-2轮胎工厂.png'; +import img3 from '@/assets/image/industrySolutions/3-3快递物流.png'; +import img4 from '@/assets/image/industrySolutions/3-4畜牧食品.png'; +import img5 from '@/assets/image/industrySolutions/3-5新能源.png'; +import img6 from '@/assets/image/industrySolutions/3-6智能制造.png'; +import img7 from '@/assets/image/industrySolutions/3-7工业物联.png'; -Swiper.use([Navigation, Autoplay]) + +Swiper.use([ + Navigation, + Autoplay +]) export default { name: 'ProductCenter', @@ -125,52 +137,52 @@ export default { ], tabsData: [ { - title: '工厂制造-RFID全流程管理', + title: '成品胎RFID全生命周期', value: '智能轮胎介绍', info: '智能轮胎信息', - img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg', + img: img1, id: '5' }, { - title: '成品胎RFID全生命周期', + title: '工厂制造-RFID全流程管理', value: '轮胎工厂介绍', info: '轮胎工厂信息', - img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg', + img: img2, id: '18' }, { title: 'RFID包裹分拣', value: '快递物流介绍', info: '快递物流信息', - img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8717_20250822141810A130.jpg', + img: img3, id: '19' }, { title: '工厂制造-仓储物流', value: '畜牧食品介绍', info: '在畜牧屠宰行业,RFID助力车间自动化,智能化生产,合作客户包括双汇、正大、牧原等', - img: 'http://1.13.177.47:9665/statics/2025/08/22/12_20250822135124A121.png', + img: img4, id: '20' }, { - title: '信息化数据平台', + title: '能源计量', value: '新能源介绍', info: '新能源信息', - img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg', + img: img7, id: '21' }, { title: '智能制造物联网', value: '智能制造介绍', info: '智能制造信息', - img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8736_20250822142617A134.jpg', + img: img6, id: '22' }, { - title: '能源计量', + title: '信息化数据平台', value: '工业物联介绍', info: '工业物联信息', - img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg', + img: img5, id: '23' }, ], @@ -178,22 +190,38 @@ export default { { name: 'HW-145L-6系列', img: 'http://1.13.177.47:9665/statics/2025/09/29/a7ed9fc42af9b6386126eee351f4937_20250929143910A279.png', - route: [12, 1, 2] + route: [ + 12, + 1, + 2 + ] }, { name: 'HW-R300系列', img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250926144121_20250929144331A280.png', - route: [12, 1, 3] + route: [ + 12, + 1, + 3 + ] }, { name: 'HW-D100系列', img: 'http://1.13.177.47:9665/statics/2025/09/30/%E5%9B%BE%E7%89%87bbb_20250930172331A326.png', - route: [12, 1, 4] + route: [ + 12, + 1, + 4 + ] }, { name: 'HW-R200系列', img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%9B%BE%E7%89%871_20250929162825A294.png', - route: [12, 2, 2] + route: [ + 12, + 2, + 2 + ] }, ] } @@ -206,12 +234,36 @@ export default { } this.initSwiper() }, + computed: { + tabsFontSize: function () { + let max = 0 + this.tabsData.forEach(item => { + max = Math.max(max, item.title.length) + }) + let width = 100 / this.tabsData.length + return width / max + }, + widthArr: function () { + let length = 0 + this.tabsData.forEach(item => { + length += this.getTextWidth(item.title) + }) + return this.tabsData.map(item => { + return (this.getTextWidth(item.title) / length) * 100 + }) + } + }, watch: { '$route'() { this.tabsActive = parseFloat(this.$route.query.id) } }, methods: { + getTextWidth(text) { + return String(text || '').split('').reduce((total, char) => { + return total + (/[\x00-\xff]/.test(char) ? 1 : 2) + }, 0) + }, checkTabs(e, k) { this.tabsActive = e.id }, @@ -263,48 +315,105 @@ export default { } +//.tabs { +// cursor: pointer; +// bottom: 0; +// width: 100%; +// white-space: nowrap; +// background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); +// backdrop-filter: saturate(50%) blur(4px); +// +// .content { +// width: 100%; +// position: relative; +// left: 50%; +// bottom: 0; +// transform: translateX(-50%); +// +// .tab { +// display: inline-block; +// line-height: 6.2vw; +// letter-spacing: 3px; +// font-size: 1vw; +// position: relative; +// padding: 0 2vw; +// +// &:last-child::after { +// display: none; +// } +// +// &::after { +// content: ''; +// position: absolute; +// right: 0; +// width: 1px; +// height: 1vw; +// background-color: #409eff; +// top: calc(50% - 0.5vw); +// } +// } +// +// .tab.active { +// color: @standard-color; +// //border: 1px solid #fff6; +// //box-shadow: 0 0 3px #0002; +// } +// } +//} + .tabs { - cursor: pointer; - bottom: 0; - width: 100%; + position: sticky; + top: 0; + margin-top: calc(-6.405vw + 2px); + width: calc(100% - 2px); + height: calc(6.405vw - 2px); white-space: nowrap; - background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); - backdrop-filter: saturate(50%) blur(4px); + //background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); + background: linear-gradient(to bottom, #e7efff, #f6faff); + //backdrop-filter: saturate(50%) blur(4px); + border: 1px solid #fff; + z-index: 9999; + box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1); .content { - width: 100%; + width: 100vw; position: relative; - left: 50%; + left: 19%; + left: 0%; bottom: 0; - transform: translateX(-50%); + text-align: left; + //transform: translateX(-50%); .tab { + cursor: pointer; display: inline-block; line-height: 6.2vw; letter-spacing: 3px; - font-size: 1vw; + font-size: 1.6vw; position: relative; - padding: 0 2vw; + text-align: center; + padding: 0 1vw; - &:last-child::after { - display: none; - } - - &::after { - content: ''; - position: absolute; - right: 0; - width: 1px; - height: 1vw; - background-color: #409eff; - top: calc(50% - 0.5vw); - } + //&:last-child::after { + // display: none; + //} + // + //&::after { + // content: ''; + // position: absolute; + // right: 0; + // width: 1px; + // height: 1vw; + // background-color: #409eff; + // top: calc(50% - 0.5vw); + //} } .tab.active { color: @standard-color; - //border: 1px solid #fff6; - //box-shadow: 0 0 3px #0002; + font-weight: 700; + border: 1px solid #fff; + box-shadow: 0 0 3px #0002; } } } diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue index 5bea230..6ad5a9b 100644 --- a/src/views/productCenter/index.vue +++ b/src/views/productCenter/index.vue @@ -134,48 +134,103 @@ export default { } +//.tabs { +// cursor: pointer; +// bottom: 0; +// width: 100%; +// white-space: nowrap; +// background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); +// backdrop-filter: saturate(50%) blur(4px); +// +// .content { +// width: 100%; +// position: relative; +// left: 50%; +// bottom: 0; +// transform: translateX(-50%); +// +// .tab { +// display: inline-block; +// line-height: 6.2vw; +// letter-spacing: 3px; +// font-size: 1vw; +// position: relative; +// padding: 0 2vw; +// +// &:last-child::after { +// display: none; +// } +// +// &::after { +// content: ''; +// position: absolute; +// right: 0; +// width: 1px; +// height: 1vw; +// background-color: #409eff; +// top: calc(50% - 0.5vw); +// } +// } +// +// .tab.active { +// color: @standard-color; +// //border: 1px solid #fff6; +// //box-shadow: 0 0 3px #0002; +// } +// } +//} + .tabs { - cursor: pointer; - bottom: 0; - width: 100%; + position: sticky; + top: 0; + margin-top: calc(-6.405vw + 2px); + width: calc(100% - 2px); + height: calc(6.405vw - 2px); white-space: nowrap; - background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); - backdrop-filter: saturate(50%) blur(4px); + //background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); + background: linear-gradient(to bottom, #e7efff, #f6faff); + //backdrop-filter: saturate(50%) blur(4px); + border: 1px solid #fff; + z-index: 9999; + box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1); .content { width: 100%; position: relative; - left: 50%; + left: 19%; bottom: 0; - transform: translateX(-50%); + text-align: left; + //transform: translateX(-50%); .tab { + cursor: pointer; display: inline-block; line-height: 6.2vw; letter-spacing: 3px; - font-size: 1vw; + font-size: 1.6vw; position: relative; - padding: 0 2vw; + padding: 0 1vw; - &:last-child::after { - display: none; - } - - &::after { - content: ''; - position: absolute; - right: 0; - width: 1px; - height: 1vw; - background-color: #409eff; - top: calc(50% - 0.5vw); - } + //&:last-child::after { + // display: none; + //} + // + //&::after { + // content: ''; + // position: absolute; + // right: 0; + // width: 1px; + // height: 1vw; + // background-color: #409eff; + // top: calc(50% - 0.5vw); + //} } .tab.active { color: @standard-color; - //border: 1px solid #fff6; - //box-shadow: 0 0 3px #0002; + font-weight: 700; + border: 1px solid #fff; + box-shadow: 0 0 3px #0002; } } } diff --git a/src/views/productCenter/produceModel.vue b/src/views/productCenter/produceModel.vue index 489a17b..64fa3f4 100644 --- a/src/views/productCenter/produceModel.vue +++ b/src/views/productCenter/produceModel.vue @@ -103,11 +103,11 @@ export default { margin-top: 2.3vw; /deep/ .el-tabs__header { - margin: 0 20vw 15px; + margin: 0 19vw 15px; } /deep/ .el-tabs__content { - padding: 0 20vw; + padding: 0 19vw; background-color: fade(@standard-color, 10); } diff --git a/src/views/serviceSupport/contactUs.vue b/src/views/serviceSupport/contactUs.vue index 4e1795e..3a4a017 100644 --- a/src/views/serviceSupport/contactUs.vue +++ b/src/views/serviceSupport/contactUs.vue @@ -60,7 +60,7 @@ export default { @import "~@/style.less"; .content { - width: 65vw; + width: 62vw; margin: 2.1vw auto 0; padding-top: 3.1vw; text-align: left; diff --git a/src/views/serviceSupport/index.vue b/src/views/serviceSupport/index.vue index d005591..06e43eb 100644 --- a/src/views/serviceSupport/index.vue +++ b/src/views/serviceSupport/index.vue @@ -3,17 +3,17 @@
{{ i.title }}
@@ -36,6 +36,9 @@ import Recruitment from './recruitment' import Copyright from '@/components/copyright' import {getAboutUsInfo} from "@/api/contactUs"; +import img1 from '@/assets/image/serviceSupport/5-1联系我们.png' +import img2 from '@/assets/image/serviceSupport/5-2加入我们.png' + export default { name: 'ContactUs1', components: { @@ -49,8 +52,12 @@ export default { }, data() { return { - banner: '', + banner: img1, bannerTitle: '', + banners: [ + img1, + img2 + ], tabsActive: 0, tabsList: [], data: { @@ -178,52 +185,106 @@ export default { } } +//.tabs { +// cursor: pointer; +// bottom: 0; +// width: 100%; +// white-space: nowrap; +// background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); +// backdrop-filter: saturate(50%) blur(4px); +// +// .content { +// width: 100%; +// position: relative; +// left: 50%; +// bottom: 0; +// transform: translateX(-50%); +// +// .tab { +// display: inline-block; +// line-height: 6.2vw; +// letter-spacing: 3px; +// font-size: 1vw; +// position: relative; +// padding: 0 2vw; +// +// &:last-child::after { +// display: none; +// } +// +// &::after { +// content: ''; +// position: absolute; +// right: 0; +// width: 1px; +// height: 1vw; +// background-color: #409eff; +// top: calc(50% - 0.5vw); +// } +// } +// +// .tab.active { +// color: @standard-color; +// //border: 1px solid #fff6; +// //box-shadow: 0 0 3px #0002; +// } +// } +//} + .tabs { - cursor: pointer; - bottom: 0; - width: 100%; + position: sticky; + top: 0; + margin-top: calc(-6.405vw + 2px); + width: calc(100% - 2px); + height: calc(6.405vw - 2px); white-space: nowrap; - background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); - backdrop-filter: saturate(50%) blur(4px); + //background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10)); + background: linear-gradient(to bottom, #e7efff, #f6faff); + //backdrop-filter: saturate(50%) blur(4px); + border: 1px solid #fff; + z-index: 9999; + box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1); .content { - width: 100%; + width: 62vw; position: relative; - left: 50%; + left: 19%; bottom: 0; - transform: translateX(-50%); + text-align: center; + //transform: translateX(-50%); .tab { + cursor: pointer; display: inline-block; line-height: 6.2vw; letter-spacing: 3px; - font-size: 1vw; + font-size: 1.6vw; position: relative; - padding: 0 2vw; + padding: 0 3vw; - &:last-child::after { - display: none; - } - - &::after { - content: ''; - position: absolute; - right: 0; - width: 1px; - height: 1vw; - background-color: #409eff; - top: calc(50% - 0.5vw); - } + //&:last-child::after { + // display: none; + //} + // + //&::after { + // content: ''; + // position: absolute; + // right: 0; + // width: 1px; + // height: 1vw; + // background-color: #409eff; + // top: calc(50% - 0.5vw); + //} } .tab.active { color: @standard-color; - //border: 1px solid #fff6; - //box-shadow: 0 0 3px #0002; + font-weight: 700; + border: 1px solid #fff; + box-shadow: 0 0 3px #0002; } } } - .companyProfile { width: 100%; } diff --git a/src/views/serviceSupport/preSale.vue b/src/views/serviceSupport/preSale.vue index c56816d..1699bac 100644 --- a/src/views/serviceSupport/preSale.vue +++ b/src/views/serviceSupport/preSale.vue @@ -6,16 +6,16 @@
- + - + - + - +
@@ -66,7 +66,7 @@ export default { .content { display: inline-block; - width: 65vw; + width: 62vw; //height: 20.1vw; //border: 1px solid #ccc3; margin-top: 3.7vw; diff --git a/src/views/serviceSupport/recruitment.vue b/src/views/serviceSupport/recruitment.vue index a5cc615..d5d5b85 100644 --- a/src/views/serviceSupport/recruitment.vue +++ b/src/views/serviceSupport/recruitment.vue @@ -98,7 +98,7 @@ export default { @import "~@/style.less"; .job-detail-container { - max-width: 800px; + width: 62vw; margin: 40px auto; background-color: #f5f7fa; border-radius: 8px;