From 68e9ca0b9076a0fe14474cc71b6dc2c420fc5e7f Mon Sep 17 00:00:00 2001
From: yangyin <18723093654@163.com>
Date: 星期日, 07 七月 2024 11:43:12 +0800
Subject: [PATCH] feat: 新增指令使用模板可以弹窗
---
src/views/project/ch/home/AboutUs.vue | 284 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 279 insertions(+), 5 deletions(-)
diff --git a/src/views/project/ch/home/AboutUs.vue b/src/views/project/ch/home/AboutUs.vue
index 774cc5a..f92169b 100644
--- a/src/views/project/ch/home/AboutUs.vue
+++ b/src/views/project/ch/home/AboutUs.vue
@@ -4,11 +4,103 @@
<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">
+ <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 text-[#5dccef]" color="#fff">
+ <i class="ywicon icon-changyonglogo37" style="font-size: 16px !important"></i>
+ <div class="h-[25px]">Android涓嬭浇</div>
+ </el-button>
+ <el-button class="btn text-[#5dccef]" color="#fff"
+ ><i class="ywicon icon-windows" style="font-size: 16px !important"></i>
+ <div class="h-[25px]">Windows涓嬭浇</div></el-button
+ >
+ <el-button class="btn text-[#5dccef]" color="#fff">
+ <i class="ywicon icon-jiankong" style="font-size: 16px !important"></i>
+ <div class="h-[25px]">浣撻獙缃戦〉涓嬭浇</div>
+ </el-button>
+ </div>
+ </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 text-[#76d587]" color="#fff"
+ ><i class="ywicon icon-windows" style="font-size: 16px !important"></i>
+ <div class="h-[25px]">Windows涓嬭浇</div></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 text-[#ff7564]" color="#fff">
+ <i class="ywicon icon-jiankong" style="font-size: 16px !important"></i>
+ <div class="h-[25px]">浣撻獙缃戦〉涓嬭浇</div>
+ </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>
+ </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="item.ID">
+ <i :class="`ywicon ${item.icon} mr-[8px] !text-[18px]`"></i>
+ <div class="info_item_title">{{ item.title }}</div>
+ <div class="info_item">{{ item.content }}</div>
+ </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>
</div>
</div>
@@ -17,7 +109,34 @@
</div>
</template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+let state = reactive({
+ usList: [
+ {
+ ID: 1,
+ icon: 'icon-dianhua',
+ title: '鑱旂郴鏂瑰紡:',
+ content: '023-98657832',
+ },
+ {
+ ID: 2,
+ icon: 'icon-youxiang',
+ title: '鍟嗗姟鍚堜綔:',
+ content: 'smh@eventech.cn',
+ },
+ {
+ ID: 3,
+
+ icon: 'icon-dizhi',
+ title: '鍏徃鍦板潃:',
+ content: '涓婃捣鏃堕椀琛屽尯姹熸湀璺�999鍙峰浜氱壒绉戞妧鍥�1鍙锋ゼ615瀹�',
+ },
+ ],
+ rcList: ['/static/images/wave/copyright.jpg'],
+});
+</script>
<style scoped lang="scss">
.about-us-container {
--title: 14px;
@@ -25,7 +144,7 @@
--gap: 12px;
--maxWidth: 864px;
--color: #5dccef;
-
+ --color2: #76d587;
width: 100%;
display: flex;
-webkit-box-orient: vertical;
@@ -53,9 +172,13 @@
padding: var(--gap);
border-radius: 8px;
color: #fff;
- background-color: var(--color);
+
.product_item:first-child {
- color: #5dccef;
+ color: var(--color);
+ }
+ .product_item:nth-child(2) {
+ color: var(--color2);
+ --hoverColor: rgba();
}
}
.row_layout {
@@ -64,7 +187,158 @@
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;
+ width: 100%;
+ padding: 0px 8px;
+ height: 30px;
+ line-height: 25px;
+ 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;
+ text-decoration: none;
+
+ -webkit-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ transition: all 0.3s;
+ font-size: 12px;
+ white-space: nowrap;
+ }
+ .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);
+ }
+ }
+ .us {
+ margin-top: var(--gap);
+ padding: var(--gap);
+ min-width: 0;
+ border-radius: 8px;
+ background-color: #1d86ff;
+ color: #fff;
+ 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;
+ }
+ }
+ }
}
}
}
</style>
+import item from 'element-plus/es/components/space/src/item';
--
Gitblit v1.9.3