From 9c100512a92bf3ac2f1c8b739e843199a69cd411 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 26 十一月 2024 17:44:17 +0800
Subject: [PATCH] Merge branch 'test' of http://47.103.154.90:83/r/WI/Web.V1.0 into test
---
src/views/project/ch/home/AboutUs.vue | 415 +++++++++++++++++------------------------------------------
1 files changed, 121 insertions(+), 294 deletions(-)
diff --git a/src/views/project/ch/home/AboutUs.vue b/src/views/project/ch/home/AboutUs.vue
index 080ade3..66c0ff2 100644
--- a/src/views/project/ch/home/AboutUs.vue
+++ b/src/views/project/ch/home/AboutUs.vue
@@ -1,318 +1,145 @@
<template>
- <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] relative pr-[32px] pb-[50px] pl-[32px] pt-[42px] w100">
- <div class="about-us-container">
- <div class="about-us-box flex flex-col">
- <h1>浜у搧涓庢湇鍔�</h1>
- <div class="mt-[12px] w100 flex flex-wrap gap-[12px]">
- <div class="product_item row_layout bg-[#5dccef]">
- <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
- <div class="content">
- <h2>鏅鸿兘鐩戞帶</h2>
- <p>鏅鸿兘鐩戞帶绯荤粺锛屽彲瀹炴椂鐩戞帶璁惧鐘舵�侊紝骞舵彁渚涢璀︺�佹姤璀︺�佽繙绋嬫帶鍒剁瓑鍔熻兘銆�</p>
- </div>
- <div class="w-[120px] self-end">
- <el-button class="btn" color="#fff"><span class="h-[25px]">Android涓嬭浇</span></el-button>
- <el-button class="btn" color="#fff"><span class="h-[15px]">Windows涓嬭浇</span></el-button>
- <el-button class="btn" color="#fff"><span class="h-[17px]">浣撻獙缃戦〉涓嬭浇</span></el-button>
- </div>
+ <div class="w100 h100 bg-[#fff] overflow-auto">
+ <div class="container">
+ <div class="set_introduce">
+ <h3 class="mod-m-title">鍏徃绠�浠�</h3>
+ <div class="brief-text-box">
+ <h4>鍏充簬涓婃捣鎷夌摝閿″崱鏂囨櫤鑳界鎶�鏈夐檺鍏徃</h4>
+ <p class="desc">
+ 涓�瀹跺厖婊℃椿鍔涗笌鍒涙柊绮剧鐨勬柊鍏寸鎶�浼佷笟锛屾浠ュ叾鍓嶆部鐨勪汉宸ユ櫤鑳斤紙AI锛夋妧鏈拰鍏堣繘鐨勫ぇ鍨嬭瑷�妯″瀷锛圠LM锛夊紩棰嗘暟鎹鐞嗐�佹暟鎹垎鏋愬拰鏁版嵁娌荤悊鐨勬柊娴疆銆傛垜浠嚧鍔涗簬灏嗘櫤鑳界鎶�涓庢按鍔¤涓氭繁搴﹁瀺鍚堬紝鎵撻�犳按鍔℃櫤鑳斤紙WI锛夌殑鍒涙柊搴旂敤锛屽疄鐜癢aterData涓嶢I鐨勬棤缂濆鎺ャ��
+ </p>
+ </div>
+ </div>
+ <div class="set_mission">
+ <div class="flex items-center">
+ <div class="w100 h100">
+ <img src="/static/images/about/1.webp" class="w-[580px] h-[315px]" />
</div>
- <div class="product_item column_layout bg-[#76d587]">
- <div class="top">
- <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
- <div class="content">
- <h2>Office 鏅鸿兘鍔╂墜</h2>
- <p>AI澶ц瑷�妯″瀷鎵撻�犵殑 Office 鎻掍欢锛岀洿鎺ュ湪 Word 鍜� PPT 涓彁渚涙枃妗ｅ垱浣溿�佹姤鍛婃挵鍐欑瓑鏅鸿兘杈呭姪锛屾樉钁楁彁鍗囧姙鍏晥鐜囥��</p>
- </div>
- </div>
-
- <div class="w-[120px] ml-auto">
- <el-button class="btn" color="#fff"><span class="h-[15px]">Windows涓嬭浇</span></el-button>
- </div>
- </div>
- <div class="product_item column_layout bg-[#ff7564]">
- <div class="top">
- <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
- <div class="content">
- <h2>Office 鏅鸿兘鍔╂墜</h2>
- <p>AI澶ц瑷�妯″瀷鎵撻�犵殑 Office 鎻掍欢锛岀洿鎺ュ湪 Word 鍜� PPT 涓彁渚涙枃妗ｅ垱浣溿�佹姤鍛婃挵鍐欑瓑鏅鸿兘杈呭姪锛屾樉钁楁彁鍗囧姙鍏晥鐜囥��</p>
- </div>
- </div>
-
- <div class="w-[120px] ml-auto">
- <el-button class="btn" color="#fff"><span class="h-[15px]">浣撻獙缃戦〉涓嬭浇</span></el-button>
- </div>
- </div>
- <div class="product_item row_layout bg-[#ffbb5e]">
- <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
- <div class="content">
- <h2>AI 浣滀笟杈呭</h2>
- <p>
- 鎵嬫満鎷嶇収鎴栦笂浼犲浘鐗囧氨鑳藉揩閫熷府鍔╄В棰樻垨鎵规敼浣滀笟锛屾湁璇︾粏鐨勫垎鏋愬拰瑙ｉ杩囩▼锛屽寘鍚鏂囥�佹暟瀛︺�佽嫳璇�佺墿鐞嗙瓑涓昏瀛︾锛岀簿閫氫粠灏忓鍒板ぇ瀛︾殑鎵�鏈夌煡璇嗭紝濡ュΕ鐨凙I瀛﹂湼锛屽叧娉ㄥ叕浼楀彿鍗冲彲浣跨敤銆�
- </p>
- </div>
- <div class="code">
- <img src="/static/images/wave/code.jpg" class="w-[80px] h-[80px]" />
- <p>鎵爜鍏虫敞寰俊鍏紬鍙�</p>
+ <div class="w100 h100 px-[30px]">
+ <div class="title">鎰挎櫙鍙婁娇鍛�</div>
+ <div class="desc">
+ 鎴戜滑鐨勪娇鍛芥槸鎺ㄥ姩姘村姟浼佷笟鐨勬暟瀛楀寲杞瀷锛岄�氳繃鏅烘収姘村姟鏁版嵁鐨勬繁搴︽寲鎺橈紝涓鸿涓氬甫鏉ラ潻鍛芥�х殑鍙樺寲銆傛垜浠笉浠呮槸鎶�鏈殑鍏堣鑰咃紝鏇存槸鏅烘収姘村姟棰嗗煙鐨勬帰绱㈣�呭拰瀹炶返鑰咃紝鑷村姏浜庡皢鏁版嵁鐨勫姏閲忚浆鍖栦负姘村姟琛屼笟鐨勬柊鍔ㄨ兘锛屼负鍙寔缁彂灞曠殑鏈潵璐＄尞鎴戜滑鐨勬櫤鎱у拰鍔涢噺銆�
</div>
</div>
</div>
- <div class="us">
- <div class="flex-1 min-w-0">
- <h2>鍏充簬涓婃捣涔夌淮娴佷綋绉戞妧鏈夐檺鍏徃</h2>
- <p>
- 涓婃捣涔夌淮娴佷綋绉戞妧鏈夐檺鍏徃(绠�绉�"涔夌淮")锛屾垚绔嬩簬2011骞达紝鏄竴瀹惰蒋浠跺拰浜掕仈缃戜骇鍝佹彁渚涘晢锛�
- 涓撴敞浜庢妧鍏徃鐜板凡鑾峰彇杞欢钁椾綔鏉�20浣欓」锛屽叾涓�滃伐涓氬惊鐜緵姘存车绯荤粺杩愯鐘舵�佽瘖鏂笌鑺傝兘鍏抽敭鎶�鏈�濋」鐩崳鑾�2018骞村害涓浗鍟嗕笟鑱斿悎浼氱瀛︽妧鏈竴绛夊锛�
- 鍏徃骞朵笖杩炵画涓夊勾鑾峰緱涓婃捣甯傗�滅鎶�鍨嬩腑灏忎紒涓氭妧鏈垱鏂板熀閲戔�濊祫閲戞敮鎸� 鍙戝睍閫熷害涓婄殑浼樺紓琛ㄧ幇锛屽揩閫熷緱鍒颁簡涓氬唴鍜岀敤鎴风殑涓�鑷村ソ璇勩��
- </p>
- <div class="mt-[12px] flex" v-for="(item, index) in state.usList" :key="index">
- <div class="info_item_title">{{ item.title }}</div>
- <div class="info_item">{{ item.content }}</div>
+ </div>
+ <div class="set_mission">
+ <div class="flex items-center">
+ <div class="w100 h100 px-[30px]">
+ <div class="title">鍚嶅瓧璧锋簮</div>
+ <div class="desc">
+ 涓婃捣鎷夌摝閿″崱鏂囨櫤鑳界鎶�鏈夐檺鍏徃鐨勫悕瀛楋紝鏄涓や綅鍖栧宸ㄥ尃鈥斺�斿畨鎵樹竾-娲涙湕路鎷夌摝閿★紙Antoine-Laurent de
+ Lavoisier锛夊拰浜ㄥ埄路鍗℃枃杩锛圚enry
+ Cavendish锛夌殑鑷存暚銆傝繖涓や綅绉戝瀹跺湪鍖栧棰嗗煙鐨勮础鐚紝灏ゅ叾鏄姘寸殑缁勬垚鍜屾�ц川鐨勭爺绌讹紝涓哄寲瀛﹀伐涓氶潻鍛藉瀹氫簡鍩虹銆�
</div>
</div>
- <div class="right">
- <div class="relative">
- <el-image
- style="width: 150px; height: 207px"
- src="/static/images/wave/copyright.jpg"
- :zoom-rate="1.2"
- :max-scale="7"
- :min-scale="0.2"
- :preview-src-list="state.rcList"
- :initial-index="4"
- fit="cover"
- close-on-press-escape
- />
- <!-- <div class="view">
- <i class="iconfont icon-xianshimima font14 mr-[4px]">鏌ョ湅</i>
- </div> -->
+ <div class="w100 h100">
+ <img src="/static/images/about/2.webp" class="w-[580px] h-[315px]" />
+ </div>
+ </div>
+ </div>
+ <div class="set_mission">
+ <div class="flex items-center">
+ <div class="w100 h100">
+ <img src="/static/images/about/3.webp" class="w-[580px] h-[315px] object-cover" />
+ </div>
+ <div class="w100 h100 px-[30px]">
+ <div class="title">鐜颁唬鍖栧涔嬬埗</div>
+ <div class="desc">
+ 鎷夌摝閿¤瑾変负鐜颁唬鍖栧涔嬬埗锛屼粬閫氳繃绮剧‘鐨勫疄楠屾柟娉曪紝鎺ㄧ炕浜嗗綋鏃舵祦琛岀殑鐕冪礌璇达紝璇佹槑浜嗙┖姘旂敱姘ф皵鍜屾爱姘旂粍鎴愶紝骞剁‘绔嬩簡璐ㄩ噺瀹堟亽瀹氬緥銆備粬鐨勫疄楠岃缃璁＄簿宸э紝鑳藉绮剧‘娴嬮噺鍖栧鍙嶅簲涓墿璐ㄧ殑璐ㄩ噺鍙樺寲锛屼粠鑰岃瘉鏄庝簡姘村彲浠ュ垎瑙ｆ垚姘㈠拰姘с�傛媺鐡﹂敗鐨勮繖浜涘彂鐜帮紝涓嶄粎鎺ㄥ姩浜嗗寲瀛︾瀛︾殑鍙戝睍锛屼篃涓哄悗鏉ョ殑宸ヤ笟闈╁懡鎻愪緵浜嗙悊璁哄熀纭�銆�
+ 鍗℃枃杩鍒欎互鍏跺姘㈡皵鐨勭爺绌惰�岄椈鍚嶃�備粬閫氳繃瀹為獙鍒嗙鍑轰簡姘㈡皵锛屽苟瀵瑰叾鎬ц川杩涜浜嗚缁嗙爺绌讹紝璇佹槑浜嗘阿姘旀槸姘寸殑缁勬垚閮ㄥ垎涔嬩竴銆傚崱鏂囪开璁哥殑杩欎竴鍙戠幇锛岃繘涓�姝ヨ瘉瀹炰簡姘寸殑缁勬垚锛屽苟涓哄悗鏉ョ殑鍖栧宸ヤ笟鎻愪緵浜嗛噸瑕佺殑鍘熸潗鏂欍��
</div>
</div>
</div>
+ </div>
+ <div class="set_bottom">
+ <p>
+ 涓婃捣鎷夌摝閿″崱鏂囨櫤鑳界鎶�鏈夐檺鍏徃浠ヨ繖涓や綅绉戝瀹剁殑鍚嶅瓧鍛藉悕锛屼綋鐜颁簡鍏徃瀵规櫤鎱ф按鍔℃暟鎹环鍊兼寲鎺樺拰搴旂敤鐨勪娇鍛藉拰杩滄櫙銆傚叕鍙歌嚧鍔涗簬閫氳繃鍏堣繘鐨勬妧鏈拰鍒涙柊鐨勬柟娉曪紝瀹炵幇姘村姟鏁版嵁鐨勬櫤鑳藉寲绠＄悊鍜屼紭鍖栵紝浠ユ彁楂樻按璧勬簮鐨勫埄鐢ㄦ晥鐜囧拰绠＄悊姘村钩銆傛濡傛媺鐡﹂敗鍜屽崱鏂囪开璁搁�氳繃浠栦滑鐨勫疄楠屽拰鍙戠幇寮�鍚簡鍖栧鐨勬柊绾厓锛屼笂娴锋媺鐡﹂敗鍗℃枃鏅鸿兘绉戞妧鏈夐檺鍏徃涔熷笇鏈涢�氳繃鍏跺湪鏅烘収姘村姟棰嗗煙鐨勫姫鍔涳紝寮�鍚按鍔℃暟鎹环鍊煎簲鐢ㄧ殑鏂扮瘒绔狅紝涓烘按璧勬簮鐨勫彲鎸佺画鍒╃敤鍜岀幆澧冧繚鎶ゅ仛鍑鸿础鐚��
+ </p>
</div>
</div>
</div>
</template>
-<script setup lang="ts">
-import { reactive } from 'vue';
-
-let state = reactive({
- usList: [
- {
- ID: 1,
- icon: '',
- title: '绠�鍘嗘姇閫�:',
- content: 'smh@eventech.cn',
- },
- {
- ID: 2,
- icon: '',
- title: '鍟嗗姟鍚堜綔:',
- content: 'smh@eventech.cn',
- },
- {
- ID: 3,
- icon: '',
- title: '鍏徃鍦板潃:',
- content: '姹熸湀璺�999鍙峰浜氱壒绉戞妧鍥�1鍙锋ゼ615瀹�',
- },
- ],
- rcList: ['/static/images/wave/copyright.jpg'],
-});
-</script>
+<script setup lang="ts"></script>
<style scoped lang="scss">
-.about-us-container {
- --title: 14px;
- --normal: 12px;
- --gap: 12px;
- --maxWidth: 864px;
- --color: #5dccef;
- --color2: #76d587;
- width: 100%;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- box-sizing: border-box;
- padding: 0 24px;
- height: calc(100% - 42px);
- align-items: center;
- overflow-y: auto;
- .about-us-box {
- margin: auto 0;
- max-width: 864px;
- padding: 24px 0;
- h1 {
- font-size: 18px;
- font-weight: 600;
- color: #333;
- }
- .product_item {
- box-sizing: border-box;
- min-width: 0;
- width: calc(50% - var(--gap) / 2);
- padding: var(--gap);
- border-radius: 8px;
- color: #fff;
-
- .product_item:first-child {
- color: var(--color);
- }
- .product_item:nth-child(2) {
- color: var(--color2);
- --hoverColor: rgba();
- }
- }
- .row_layout {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- align-items: flex-start;
- gap: var(--gap);
- .code {
- padding: 0 2px;
- -ms-flex-item-align: center;
- align-self: center;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: end;
- -ms-flex-align: end;
- align-items: flex-end;
- p {
- font-size: 12px;
- margin-top: 4px;
- color: #ffffffd9;
- white-space: nowrap;
- }
- }
- }
- .content {
- flex: 1;
- min-width: 0;
-
- h2 {
- font-size: var(--title);
- line-height: 30px;
- font-weight: 600;
- font-family: Poppins;
- }
- p {
- text-align: justify;
- text-align-last: start;
- font-size: var(--normal);
- line-height: 18px;
- font-weight: 400;
- margin-top: 4px;
- color: hsla(0, 0%, 100%, 0.8);
- }
- }
- .btn {
- box-sizing: border-box;
+.container {
+ width: 1200px;
+ margin: 0px auto;
+ .set_introduce {
+ height: 212px;
+ width: 100%;
+ position: relative;
+ margin-top: 36px;
+ box-sizing: border-box;
+ .mod-m-title {
width: 100%;
- padding: 0px 8px;
- height: 30px;
- line-height: 22px;
- border-radius: 4px;
- background-color: #fff;
- cursor: pointer;
- display: flex;
- margin-top: 4px;
- align-items: center;
- justify-content: center;
- gap: 8px;
- font-size: 12px;
- margin-left: unset;
+ overflow: hidden;
+ text-align: center;
+ font-size: 30px;
+ font-variant: normal;
+ color: #2a2e2e;
+ font-family: 'TencentSansw7';
}
- .column_layout {
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- .top {
- display: flex;
- align-items: flex-start;
- gap: var(--gap);
+ .brief-text-box {
+ width: 100%;
+ margin-top: 52px;
+ text-align: center;
+ position: relative;
+ h4 {
+ font-size: 20px;
+ color: #2a2e2e;
+ letter-spacing: 0;
+ text-align: left;
+ line-height: 36px;
+ font-weight: 400;
+ margin: 16px auto;
+ }
+ .desc {
+ font-size: 16px;
+ color: #5f6464;
+ letter-spacing: 0;
+ text-align: left;
+ line-height: 24px;
+ width: 100%;
+ margin: 16px auto;
}
}
- .us {
- margin-top: var(--gap);
- padding: var(--gap);
- min-width: 0;
- border-radius: 8px;
- background-color: #1d86ff;
- color: #fff;
+ }
+ .set_mission {
+ background: #fbfbfb;
+ height: 315px;
+ width: 100%;
+ position: relative;
+ margin-top: 56px;
+ box-sizing: border-box;
+ .title {
+ font-size: 20px;
+ color: #2a2e2e;
+ letter-spacing: 0;
+ line-height: 36px;
+ }
+ .desc {
+ font-size: 16px;
+ color: #5f6464;
+ letter-spacing: 0;
+ line-height: 25px;
+ margin-top: 16px;
+ }
+ }
+ .set_bottom {
+ background-color: #fbfbfb;
+ margin: 60px 0px;
+ padding: 32px 0px;
+ p {
+ opacity: 1;
display: flex;
- align-items: center;
- gap: 24px;
- h2 {
- font-size: var(--title);
- line-height: 20px;
- }
- p {
- text-align: justify;
- -moz-text-align-last: start;
- text-align-last: start;
- font-size: var(--normal);
- line-height: 20px;
- margin-top: var(--gap);
- color: #ffffffd9;
- }
- .info_item_title {
- font-size: var(--normal);
- line-height: 20px;
- color: white;
- display: flex;
- font-weight: 800;
- align-items: center;
- margin-right: 4px;
- }
- .info_item {
- font-size: var(--normal);
- line-height: 20px;
- color: #ffffffd9;
- display: flex;
- align-items: center;
- margin-right: 4px;
- }
- .right {
- width: 200px;
- display: flex;
-
- align-items: center;
- flex-direction: column;
- .view {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: transparent;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: background-color 0.2s;
- cursor: pointer;
- font-size: 12px;
- color: transparent;
-
- &:hover {
- background-color: rgba(0, 0, 0, 0.7);
- color: #fff;
- }
- i {
- transition: color 0.2s;
- margin-right: 4px;
- }
- }
- }
+ font-size: 16px;
+ color: #5f6464;
+ letter-spacing: 0;
+ line-height: 25px;
+ text-align: left;
+ box-sizing: border-box;
}
}
}
--
Gitblit v1.9.3