<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="donggongyangshi.css">
<link rel="stylesheet" href="xet.css">
<script>
// 等待頁(yè)面加載完成
document.addEventListener('DOMContentLoaded', function() {
// 輪播圖功能
const sixthFeet = document.querySelector('.sixth_feet');
const cards = document.querySelectorAll('.sixth_feet > div');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
// 當(dāng)前顯示的項(xiàng)目索引
let currentIndex = 0;
// 更新輪播圖顯示
function updateCarousel() {
// 計(jì)算滾動(dòng)位置
const cardWidth = cards[0].offsetWidth + 10; // 卡片寬度 + 間距
sixthFeet.scrollTo({
left: currentIndex * cardWidth,
behavior: 'smooth'
});
}
// 下一個(gè)按鈕點(diǎn)擊事件
nextBtn.addEventListener('click', function() {
if (currentIndex < cards.length - 1) {
currentIndex++;
updateCarousel();
}
});
// 上一個(gè)按鈕點(diǎn)擊事件
prevBtn.addEventListener('click', function() {
if (currentIndex > 0) {
currentIndex--;
updateCarousel();
}
});
});
</script>
</head>
<body>
<div class="whole">
<div class="first">
<div class="header">
<div class="header_one">
<ul class="one">
<li class="ff_i">
<img src="./img/xet.png" alt="">
</li>
<li class="ff">首頁(yè) </li>
<li class="ff">解決方案 </li>
<li class="ff">產(chǎn)品服務(wù)</li>
<li class="ff">價(jià)格</li>
<li class="ff">活動(dòng)</li>
<li class="ff">案例</li>
<li class="ff">渠道合作</li>
<li class="ff">下載與幫助</li>
<li class="ff">關(guān)于我們</li>
</ul>
</div>
<ul class="two">
<li class="ff">我是學(xué)員</li>
<button class="ff_b">商家登錄</button>
<button class="ff_b">免費(fèi)試用</button>
</ul>
</div>
</div>
<!-- ------------------第二張 ----------------- ---- ------ --------- -->
<div class="second">
<div class="second_header">
<h2> 我們的產(chǎn)品能力</h2>
</div>
<div class="second_feet">
<img src="./img/m3moa2m10v5k (2)(1).png" alt="">
</div>
<div class="second_feet_two">
<li class="ss">
<h3>知識(shí)店鋪</h3>
<p>1分鐘搭建你的知識(shí)商城</p>
<p>助理高校知識(shí)變現(xiàn)</p>
<p class="ss_b">免費(fèi)試用</p>
</li>
<li class="ss">
<h3>私域直播</h3>
<p>企業(yè)級(jí)專(zhuān)屬私域直播平臺(tái)</p>
<p>實(shí)現(xiàn)私域流量高效運(yùn)營(yíng)</p>
<p class="ss_b">免費(fèi)試用</p>
</li>
<li class="ss">
<h3>企業(yè)SCRM</h3>
<p>企業(yè)微信私域運(yùn)營(yíng)神器</p>
<p>數(shù)據(jù)洞察驅(qū)動(dòng)業(yè)績(jī)?cè)鲩L(zhǎng)</p>
<p class="ss_b">免費(fèi)試用</p>
</li>
</ul>
</div>
</div>
</div>
<!------there------------------- 第三張----------------tow------>
<div class="third">
<div class="third_header">
<h2>我們的解決方案</h2>
</div>
<div class="third_body">
<p>公域獲客</p>
<p>私域運(yùn)營(yíng)</p>
<p>直播帶貨</p>
<p>內(nèi)容支付</p>
<p>數(shù)據(jù)化運(yùn)營(yíng)</p>
</div>
<div class="third_feet">
<img src="./img/m3moa2m10v5k (2)(1).png" alt="">
<div class="third_feet_one">
<div class="third_feet_tow">
<h3>公域獲客</h3>
<h4>多渠道獲客，沉淀私域流量池</h4>
</div>
<ul class="third_feet_three">
<li>打通抖音/快手/小紅書(shū)/視頻號(hào)/公眾號(hào)，
支持直播間/短視頻/賬號(hào)主頁(yè)等多種課程掛載方式，快速開(kāi)啟知識(shí)變現(xiàn)</p>
</li>
<li>
多種公域轉(zhuǎn)私域工具，支持添加企微/引流
加群加人/渠道活碼/分配引擎等工具，客戶可批量導(dǎo)流到私域流量池
</li>
<li>
豐富的廣告獲客能力，落地頁(yè)支持表單/支付類(lèi)
0元領(lǐng)取/添加企微等多場(chǎng)景，提升廣告ROI
</li>
</ul>
<div class="third_feet_b">
<button >免費(fèi)試用</button>
<button >了解情況</button>
</div>
</div>
</div>
</div>
<!------there------------------- 第四張----------------tow------>
<div class="fourth">
<div class="fourth_header">
<h2>我們的行業(yè)解決方案</h2>
</div>
<div class="fourth_bf">
<div class="fourth_body_one">
<p>新零件門(mén)店</p>
<p>職業(yè)培訓(xùn)</p>
<p>知識(shí)付費(fèi)</p>
<p>美業(yè)直播</p>
</div>
<div class="fourth_body_tow">
<div class="fourth_body_tow_one">
<h5>新零售門(mén)店解決方案</h5>
<p>私域直播帶貨+ 推廣門(mén)店體系，助力商家私域流量高效變現(xiàn)</p>
<ul class="fourth_body_tow_one_ul">
<li class="ff">知識(shí)店鋪</li>
<li class="ff">專(zhuān)欄</li>
<li class="ff">會(huì)員</li>
<li class="ff">圈子</li>
<li class="ff">直播</li>
</ul>
<ul class="fourth_body_tow_one_ul">
<li class="ff" >表單<li>
<li class="ff">裂變海報(bào)</li>
<li class="ff">推廣員</li>
</ul>
<div class="fourth_body_tow_tow">
<button class="fourth_body_tow_b">免費(fèi)試用</button>
<button class="fourth_body_tow_b" >了解情況</button>
</div>
</div>
</div>
<div class="fourth_feet">
<p>行業(yè)內(nèi)情</p>
</div>
</div>
</div>
<!------------------------ 第五張 ----------------- -->
<div class="fifth">
<div class="fifth_header">
<h2>我們的技術(shù)優(yōu)勢(shì)</h2>
</div>
<div class="fifth_feet">
<div class="fifth_feet_one">
<h3>超穩(wěn)定</h3>
<p>多云負(fù)載均衡/全球SDN加速</p>
</div>
<div class="fifth_feet_tow">
<h3>高并發(fā)</h3>
<p>支持多用戶同時(shí)在線</p>
</div>
<div class="fifth_feet_three">
<h3>超流暢</h3>
<p>觀看端自動(dòng)探測(cè)并自動(dòng)跨云線路切換</p>
</div>
</div>
</div>
<!----------------------------- 第六張---------------------->
<div class="sixth">
<div class="sixth_header">
<h2>我們的運(yùn)營(yíng)服務(wù)</h2>
</div>
<div class="sixth_feet">
<div class="sixth_feet_one">
<img class="ff" src="./img/服務(wù)_本地社群(1).png" alt="">
<h4>社群服務(wù)</h4>
<p>標(biāo)桿商家分享，同行商家交流，總比別人快一步</p>
</div>
<div class="sixth_feet_tow">
<img class="ff" src="./img/攝圖網(wǎng)_501221054_商務(wù)女士打電話（企業(yè)商用）@3x (1)(1).png" alt="">
<h4>管家服務(wù)</h4>
<p>客戶經(jīng)理、服務(wù)管家、多角色在群，服務(wù)全面包圍</p>
</div>
<div class="sixth_feet_three">
<img class="ff" src="./img/大客服務(wù) (1)(1).png" alt="">
<h4>大客服務(wù)</h4>
<p>設(shè)置夜班服務(wù)管家/假期值班管家，24小時(shí)在線服務(wù)，服務(wù)從不掉線</p>
</div>
<div class="sixth_feet_four">
<img class="ff" src="./img/運(yùn)維服務(wù)(1).png" alt="">
<h4>運(yùn)維服務(wù)</h4>
<p>需求24小時(shí)反饋，需求處理率大于90% ，產(chǎn)品經(jīng)理1v1回復(fù)</p>
</div>
</div>
<!-- 添加導(dǎo)航按鈕 -->
<div class="sixth_nav_buttons">
<button id="prevBtn"><</button>
<button id="nextBtn">></button>
</div>
</div>
<!----------------------------- 第七張---------------------->
<div class="seventh">
<div class="seventh_header">
<h2>他們都在用小鵝通</h2>
<p>（*排名不分先后順序）</p>
</div>
<div class="seventh_body">
<div class="seventh_body_one">
<img src="./img/屏幕截圖 2025-03-23 151325.png" alt="">
<h4>小熊熊科學(xué)學(xué)習(xí)</h4>
<p>小熊熊學(xué)院以學(xué)習(xí)科學(xué)化為使命，專(zhuān)注提供學(xué)
習(xí)方法和自我管理解決方案，陪伴嚴(yán)肅，耐心，永不妥協(xié)的終身學(xué)習(xí)者！</p>
</div>
<div class="seventh_body_tow">
<img src="./img/屏幕截圖 2025-03-23 151334.png" alt="">
<h4>劉潤(rùn)·進(jìn)化的力量</h4>
<p>劉潤(rùn)老師是潤(rùn)米咨詢創(chuàng)始人，“5分鐘商學(xué)院”課程主理人，著名企
業(yè)顧問(wèn)，曾為海爾、恒基、中遠(yuǎn)海運(yùn)、中航油、中石化等多家企業(yè)提供戰(zhàn)
略咨詢服務(wù)，每10月舉辦”進(jìn)化島的力量年度演講”...</p>
</div>
<div class="seventh_body_three">
<img src="./img/屏幕截圖 2025-03-23 145325.png" alt="">
<h4>佰君易直播間</h4>
<p>白君易直播間，由培養(yǎng)過(guò)10萬(wàn)項(xiàng)目管理師的王遠(yuǎn)航老師打造，為各行業(yè)提供項(xiàng)
目管理實(shí)戰(zhàn)培訓(xùn)，佰君易直播間與小鵝通深度合作，幫助職場(chǎng)小伙伴升職記加薪</p>
</div>
</div>
<div class="seventh_feet">
<ul class="seventh_feet_one">
<li>
<img src="./img/屏幕截圖 2025-03-23 151439.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151445.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151449.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151455.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151459.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151503.png" alt="">
</li>
</ul >
<ul class="seventh_feet_one">
<li>
<img src="./img/屏幕截圖 2025-03-23 151508.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151512.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151519.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151523.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151527.png" alt="">
</li>
<li>
<img src="./img/屏幕截圖 2025-03-23 151536.png" alt="">
</li>
</ul>
<button class="seventh_feet_b">更多案例</button>
</div>
</div>
<!----------------------------- 第八張---------------------->
<div class="eighth">
<div class="eighth_header">
<h2>立即掃碼咨詢，領(lǐng)取您專(zhuān)屬的解決方案</h2>
</div>
<div class="eighth_feet">
<div class="eighth_feet_one">
<img src="./img/m2cobck10ujl.webp" alt="">
</div>
<div class="eighth_feet_tow">
<div class="eighth_feet_tow_one">
<h4>掃碼添加客戶經(jīng)理</h4>
<p>或者你也可以先</p>
</div>
<button>免費(fèi)試用</button>
</div>
</div>
</div>
<!---------------------------------------------------- 第九張------------------------------------------------------------------------->
<div class="ninth">
<div class="ninth_header">
<ul class="ninth_header_one">
<li>場(chǎng)景</li>
<li>全域獲客</li>
<li>私域運(yùn)營(yíng)</li>
<li>直播帶貨</li>
<li>內(nèi)容交付</li>
<li>數(shù)據(jù)化運(yùn)營(yíng)</li>
<li>企業(yè)內(nèi)訓(xùn)</li>
</ul>
<ul class="ninth_header_one">
<li>零售店商</li>
<li>職業(yè)培訓(xùn)</li>
<li>知識(shí)付費(fèi)</li>
<li>企業(yè)營(yíng)銷(xiāo)</li>
<li>美業(yè)直播</li>
<li>企業(yè)培訓(xùn)</li>
<li>社區(qū)團(tuán)購(gòu)</li>
<li>營(yíng)銷(xiāo)會(huì)務(wù)</li>
</ul>
<ul class="ninth_header_one">
<li>產(chǎn)品</li>
<li>知識(shí)店鋪</li>
<li>私域直播</li>
<li>企微SCRM</li>
<li>企學(xué)院</li>
<li>智能投放</li>
<li>海外版elink</li>
<li>小鵝云</li>
</ul>
<ul class="ninth_header_one">
<li>服務(wù)</li>
<li>小鵝創(chuàng)業(yè)社區(qū)</li>
<li>本地社群</li>
<li>教練聯(lián)盟</li>
<li>小鵝通訓(xùn)練營(yíng)</li>
<li>對(duì)話標(biāo)桿</li>
</ul>
<ul class="ninth_header_one">
<li>關(guān)于我們</li>
<li>公司簡(jiǎn)介</li>
<li>加入我們</li>
<li>媒體報(bào)道</li>
<li>更多咨詢</li>
<li>客戶案例</li>
<li>幫助中心</li>
</ul>
<ul class="ninth_header_one">
<li>媒體報(bào)道</li>
<li>D輪融資1.2億美元，小鵝通究竟在做什么？</li>
<li>知識(shí)付費(fèi)用戶達(dá)5.27億，內(nèi)容創(chuàng)下的..半場(chǎng)風(fēng)..</li>
<li>知識(shí)工作者的終極夢(mèng)想，可能是擁有一個(gè)“第二...</li>
<li>小鵝通：讓知識(shí)更有價(jià)值</li>
<li>小鵝通聯(lián)合艾瑞咨詢發(fā)布《2023....</li>
</ul>
<div class="ninth_header_tow">
<div class="ninth_header_tow_one">
<h4>400-102-6665</h4>
<p>周一至周日 9:00-18:00</p>
</div>
<div class="ninth_header_tow_tow">
<div class="ninth_header_tow_tow1">
<img src="./img/屏幕截圖 2025-03-23 213758.png" alt="">
<p>關(guān)注小鵝通公眾號(hào)</p>
</div>
<div class="ninth_header_tow_tow1">
<img src="./img/屏幕截圖 2025-03-23 213758.png" alt="">
<p>進(jìn)入小鵝創(chuàng)業(yè)社區(qū)</p>
</div>
</div>
</div>
</div>
<div class="ninth_footer">
<div class="ninth_footer_one">
<ul class="ninth_footer_one_ul">
<p>深圳總部：深圳市南山區(qū)粵海街道科興科學(xué)園D3棟7樓
</p>
<p>北京地址：北京市朝陽(yáng)區(qū)朝外大街乙6號(hào)23層2301B-2307</p>
<p>上海地址：中國(guó)（上海）自由貿(mào)易試驗(yàn)區(qū)紀(jì)大道1500號(hào)1601-A室</p>
</ul>
<ul class="ninth_footer_one_ul">
<li>商務(wù)合作：support@xiaoe-tech.com</li>
<li>渠道合作：partner@xiaoe-tech.com</li>
<li>投訴意見(jiàn)：xiaoeks@xiaoe-tech.com</li>
</ul>
<ul class="ninth_footer_one_ul">
<li>互聯(lián)網(wǎng)違法和不
良信息舉報(bào)電話：0755-26409534</li>
<li>互聯(lián)網(wǎng)不良信息舉報(bào)郵箱：xiaoeks@xiaoe-tech.com</li>
<li>安全漏洞反饋郵箱：security@xiaoe-tech.com</li>
</ul>
</div>
<div class="ninth_footer_tow">
<ul class="ninth_footer_tow_ul">
<li>友情鏈接</li>
<li>知識(shí)付費(fèi)軟件</li>
<li>知識(shí)付費(fèi)平臺(tái)</li>
<li>小鵝通企學(xué)院</li>
<li>私域直播工具</li>
<li>小鵝通APP</li>
<li>小鵝創(chuàng)業(yè)社區(qū)</li>
<li>小鵝通移動(dòng)版</li>
<li>小鵝通學(xué)員版</li>
</ul>
</div>
<div class="ninth_footer_three">
<div class="ninth_footer_three_one">
<p>使用臨床急需進(jìn)....</p>
<ul class="ff">
<p>
工商營(yíng)業(yè)執(zhí)照
粵公網(wǎng)安備 44030502002037號(hào)
</p>
<p>工商網(wǎng)監(jiān) 電子標(biāo)識(shí)</p>
</ul>
</div>>
<!-- <div class="ninth_footer_three_tow">
<p>Copyright ? 2015-2024 深圳小鵝網(wǎng)絡(luò)技術(shù)有限公司 All Rights
Reserved. 粵ICP備15020529號(hào)-1</p>
<p>互聯(lián)網(wǎng)藥品信息服務(wù)資格證書(shū)（粵）—經(jīng)營(yíng)性—2020—0589
醫(yī)療器械網(wǎng)絡(luò)交易服務(wù)第三方平臺(tái)備案（粵）網(wǎng)械平臺(tái)備字（2021）第00001號(hào)</p>
</div> -->
</div>
<div class="ninth_footer_three_tow">
<p>Copyright ? 2015-2024 深圳小鵝網(wǎng)絡(luò)技術(shù)有限公司 All Rights
Reserved. 粵ICP備15020529號(hào)-1</p>
<p>互聯(lián)網(wǎng)藥品信息服務(wù)資格證書(shū)（粵）—經(jīng)營(yíng)性—2020—0589
醫(yī)療器械網(wǎng)絡(luò)交易服務(wù)第三方平臺(tái)備案（粵）網(wǎng)械平臺(tái)備字（2021）第00001號(hào)</p>
</div>
</div>
</div>
</body>
</html>
css
···.whole{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.first{
width: 100%;
height: 830.6px;
/* background-color: #961e70; */
display: flex;
flex-direction: column;
align-items: center;
background-image: url(./img/m28mek5n0yyx\ \(1\).webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.header{
width: 100%;
height: 70px;
/* background-color: #1dc43e; */
display: flex;
justify-content: space-between;
align-items: center;
}
.header .one{
width: 1300px;
height: 71.99px;
/* background-color: #bdbacd; */
display: flex;
justify-content:flex-start;
align-items: center;
font-size: 15px;
list-style: none;
}
.header:hover{
background-color:#f3f0f2;
cursor: pointer;
/* 點(diǎn)擊進(jìn)去變成小手 */
}
.ff{
padding: 30px;
}
/* 確保導(dǎo)航欄元素都在同一行顯示 */
/* 圖片樣式調(diào)整 */
.ff_i img {
height: 1.5em; /* 與文字高度一致 */
width: auto;
vertical-align: middle;
}
.two{
width: 20%;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
font-size: 15px;
}
.ff_b{
width: 150px;
height: 30px;
/* background-color: #1dc43e; */
border: 1px solid #3a33a4;
border-radius: 5px;
color: #3a33a4;
margin: 5px;
}
.two .ff_b:nth-child(3){
background-color: #d4d2f4;
color: white;
}
.ff_b:hover{
background-color: #3a33a4;
color: white;
cursor: pointer;
}
.two .ff_b:nth-child(3):hover{
background-color: #9795aa;
color: white;
cursor: pointer;
}
/* -----------------------第二章------------------------- */
.second{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #b8daeb;
}
.second_header{
width: 500px;
height: 200px;
display: flex;
justify-content: center;
align-items: self-end;
}
.second_header h2{
font-size: 50px;
font-weight: 600;
}
.second_feet img{
width: 1600px;
height: 600px;
}
.second_feet_two{
display: flex;
width: 1600px;
height: 300px;
justify-content: space-between;
align-items: center;
}
.second_feet_two li{
list-style: none;
height:180px;
width: 450px;
background-color: white;
border:30px solid white;
border-radius: 20px;
padding: 0 5px;
}
.second_feet_two li .ss_b{
color: #14a4e7;
padding:10px 15px;
}
.second_feet_two li .ss_b:hover{
cursor: pointer;
}
/* ----------第三章------------------第三章------------ */
.third{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #bcf0f5;
}
.third_header{
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: self-end;
}
.third_header h2{
font-size: 50px;
font-weight: 600;
}
.third_body{
width: 800px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid white;
border-radius: 20px;
background-color: white;
margin: 20px;
}
.third_body p:hover {
cursor: pointer;
background-color: #150bd1;
color: white;
border: 1px solid white;
border-radius: 20px;
text-align: center;
line-height: 40px;
height: 40px;
width: 150px;
}
.third_feet{
background-color: white;
border-radius: 20px;
width: 1600px;
height: 600px;
display: flex;
justify-content: space-between;
align-items: center;
margin:50px;
margin-bottom: 20px;
}
.third_feet img{
width: 850px;
height: 600px;
padding: 0;
margin-left: 0;
}
.third_feet_one{
width: 700px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 20px 40px !important;
padding: 10px 20px !important;
}
.third_feet_tow {
font-size: 20px;
font-weight: 600;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-bottom: 30px !important;
}
.third_feet_tow h3{
font-size: 35px;
font-weight: 600;
margin-bottom: 10px !important;
color: rgb(1, 0, 0);
}
.third_feet_tow h4{
font-size: 18px;
color: #444;
margin-bottom: 20px !important;
}
.third_feet_three{
list-style: none;
padding: 0 !important;
margin: 0 0 30px 0 !important;
}
.third_feet_three li {
padding-left: 30px !important;
position: relative;
margin-bottom: 20px !important;
line-height: 1.6;
font-size: 16px;
color: #333;
}
.third_feet_three li::before {
content: "";
background-image: url(./img/下載.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 3px;
width: 20px;
height: 20px;
}
.third_feet_b{
margin:20px;
}
.third_feet_b button:nth-child(2){
width: 150px;
height: 40px;
border: 1px solid #150bd1;
border-radius: 5px;
background-color: white;
color: #150bd1;
padding: 5px 10px;
}
.third_feet_b button:nth-child(2):hover{
cursor: pointer;
background-color: #150bd1;
color: white;
}
.third_feet_b button:nth-child(1){
width: 150px;
height: 40px;
border: 1px solid #150bd1;
border-radius: 5px;
background-color: rgb(76, 81, 240);
color: #eaeaf3;
padding: 5px 10px;
margin: 20px;
}
.third_feet_b button:nth-child(1):hover{
cursor: pointer;
background-color: #7d9ddd;
color: white;
}
/* -----------------------第四個(gè)張------------------------- */
.fourth{
width: 100%;
height: 700px;
display: flex;
flex-direction: column;
align-items: center;
background-image: url(./img/m0w7ssdh01vr\(1\).png);
background-size: cover;
background-position: center;
}
.fourth_header{
width: 500px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.fourth_header h2{
font-size: 50px;
font-weight: 600;
color: white;
}
.bf{
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.fourth_bf{
width: 1600px;
height: 500px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #232128;
}
.fourth_body_one{
width: 200px;
height: 500px;
color: white;
font-size: 20px;
font-weight: 600;
background-color: #3e394b;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.fourth_body_one p{
margin: 10px;
padding: 10px;
}
.fourth_body_one p:hover{
cursor: pointer;
background: linear-gradient(to right, #7873d1, #423e55);
font-size: 25px;
border-radius: 10px;
width: 190px;
height: 60px;
}
.fourth_body_tow{
width: 1400px;
height: 500px;
/* background-color: #4f22be; */
display: flex;
justify-content: space-between;
align-items: center;
}
.fourth_body_tow_one{
/* background-color: #4cdfbd; */
width: 1000px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 20px;
}
.fourth_body_tow_one h5{
font-size: 30px;
font-weight: 600;
color: white;
}
.fourth_body_tow_one p{
font-size: 20px;
color: white;
margin: 10px;
}
.fourth_body_tow_one_ul{
list-style: none;
font-size: 20px;
color: white;
margin: 10px;
padding: 10px;
display: flex;
font-size: 10px;
justify-content: flex-start;
align-items: flex-start;
}
.fourth_body_tow_one_ul li{
border: 1px solid white;
border-radius: 10px;
padding: 10px;
margin: 10px;
width: 90px;
height: 90px;
line-height: 60px;
/* background-color: rgb(56, 162, 207); */
}
.fourth_body_tow_tow{
display: flex;
flex-direction: row;
}
.fourth_body_tow_b:nth-child(1){
width: 180px;
height: 40px;
border: 1px solid rgb(39, 85, 163);
border-radius: 5px;
background-color: rgb(39, 85, 163);
margin: 10px;
padding: 10px;
color: white;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.fourth_body_tow_b:nth-child(2){
background-color: none;
color: rgb(39, 85, 163);
width: 180px;
height: 40px;
border: 1px solid rgb(39, 85, 163);
border-radius: 5px;
margin: 10px;
padding: 10px;
background-color: rgb(54, 55, 76);
font-size: 20px;
text-align: center;
line-height: 20px;
}
.fourth_body_tow_b:nth-child(1):hover{
cursor: pointer;
background-color: rgb(77, 108, 162);
color: white;
}
.fourth_body_tow_b:nth-child(2):hover{
cursor: pointer;
color:white
}
.fourth_feet{
width: 400px;
height: 400px;
background-color: #232128;
color: white;
font-size: 20px;
border-left: 1px solid rgb(74, 71, 94);
/* background-color: #150bd1; */
display: flex;
justify-content: center;
}
.fourth_feet p{
margin: 20px;
padding: 20px;
font-size: 20px;
}
/* -------------------------------第五張------------------ */
.fifth {
width: 100%;
height: 800px;
display: flex;
flex-direction: column;
align-items: center;
/* background-color: #ff9900; 之前修改的明顯的橙色 */
/* box-sizing: border-box; */
/* margin-top: 0; 移除頂部外邊距，因?yàn)榻Y(jié)構(gòu)已修復(fù) */
/* padding: 50px 0; 添加內(nèi)邊距使內(nèi)容更清晰 */
}
.fifth_header {
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.fifth_header h2 {
font-size: 50px;
font-weight: 600;
}
.fifth_feet {
width: 1600px;
display: flex;
justify-content: space-between;
align-items: center;
}
.fifth_feet_one, .fifth_feet_tow, .fifth_feet_three {
width: 500px;
height: 400px;
background-color: white;
border-radius: 20px;
padding: 30px;
margin: 0 15px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fifth_feet_one {
background-image: url(./img/m10c72vn0zzo\ \(1\)\(1\).png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fifth_feet_tow{
background-image: url(./img/m04n363709k8\ \(1\)\(1\).png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fifth_feet_three{
background-image: url(./img/m04n363e0jjz\(1\).png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fifth_feet h3 {
font-size: 30px;
font-weight: 600;
margin-bottom: 20px;
text-align: center;
color: white;
position: relative;
z-index: 5;
/* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); */
line-height: normal;
/* background-color: rgba(0,0,0,0.4); */
padding: 10px;
border-radius: 10px;
width: 80%;
margin: 20px auto;
}
.fifth_feet p {
font-size: 18px;
color: white;
text-align: center;
position: relative;
z-index: 5;
/* text-shadow: 1px 1px 3px rgba(0,0,0,0.7); */
line-height: normal;
/* background-color: rgba(0,0,0,0.4); */
padding: 10px;
border-radius: 10px;
width: 80%;
margin: 0 auto;
}
/* ------------------------- 第六張---------------------- */
.sixth{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
margin-top: 0;
padding: 50px 0;
position: relative;
z-index: 2;
box-shadow: 0px -10px 30px rgba(0,0,0,0.1);
border-top: 1px solid #eee;
}
.sixth_header{
width: 500px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}
.sixth_header h2{
font-size: 50px;
font-weight: 600;
color: #333;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
/* 修改輪播容器 */
.sixth_feet{
width: 100%;
max-width: 1800px;
height: auto;
position: relative; /* 添加相對(duì)定位 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center; /* 改為垂直居中 */
overflow: hidden; /* 隱藏溢出部分，不顯示滾動(dòng)條 */
padding: 0;
}
/* 增大圖片大小 */
.sixth_feet_one img, .sixth_feet_tow img, .sixth_feet_three img, .sixth_feet_four img{
width: 450px;
height: 350px;
object-fit: contain;
margin-bottom: 20px;
}
/* 減小卡片間距，保持內(nèi)容緊湊 */
.sixth_feet_one, .sixth_feet_tow, .sixth_feet_three, .sixth_feet_four{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: transparent;
padding: 10px;
width: 460px;
min-width: 460px;
height: auto;
margin: 5px;
box-shadow: none;
flex-shrink: 0; /* 防止卡片被壓縮 */
}
/* 文字樣式調(diào)整 */
.sixth_feet_one h4, .sixth_feet_tow h4, .sixth_feet_three h4, .sixth_feet_four h4{
font-size: 22px;
font-weight: 600;
margin: 10px 0;
color: #333;
}
.sixth_feet_one p, .sixth_feet_tow p, .sixth_feet_three p, .sixth_feet_four p{
font-size: 16px;
line-height: 1.4;
color: #666;
}
/* 導(dǎo)航按鈕樣式 */
.sixth_nav_buttons {
display: flex;
justify-content: center;
margin-top: 30px;
width: 100%;
}
.sixth_nav_buttons button {
width: 40px;
height: 40px;
border: none;
background-color: #eee;
color: #333;
font-size: 18px;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.sixth_nav_buttons button:hover {
background-color: #ddd;
}
/* -----------------------第七張---------------------- */
.seventh{
width: 100%;
height: 1100px;
display: flex;
flex-direction: column;
align-items: center;
background-image: url(./img/lzuvu9jp0vcl\(1\).png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.seventh_header{
width: 600px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.seventh_header h2{
font-size: 50px;
font-weight: 600;
}
.seventh_header p{
font-size: 20px;
/* color: #666; */
}
.seventh_body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 1600px;
height: 500px;
padding: 10px;
}
.seventh_body_one, .seventh_body_tow, .seventh_body_three{
width: 400px;
height: 400px;
border: 1px solid #ccc;
border-radius: 10px;
border-color: #f3f2f2;
padding: 10px;
margin: 10px;
/* background-color: white; */
/* text-align: center;
line-height: 20px; */
}
.seventh_body_one img, .seventh_body_tow img, .seventh_body_three img{
width: 350px;
height: 250px;
text-align: center;
line-height: 20px;
}
.seventh_body_one h4, .seventh_body_tow h4, .seventh_body_three h4{
font-size: 20px;
font-weight: 600;
text-align: center;
line-height: 20px;
}
.seventh_body_one p, .seventh_body_tow p, .seventh_body_three p{
font-size: 16px;
}
.seventh_feet{
width: 1600px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.seventh_feet_one{
width: 1250px;
height: 250px;
display: flex;
flex-direction: column;
}
.seventh_feet_one img{
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
width: 180px;
height: 130px;
border-color: white;
;
}
.seventh_feet_one {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.seventh_feet_b{
width: 150px;
height: 40px;
border: 1px solid #698fe3;
border-radius: 2px;
color:#14a4e7 ;
margin-top: 10px;
font-size: 15px;
text-align: center;
line-height: 45px;
}
.seventh_feet_b:hover{
cursor: pointer;
}
/* ----------------------------第八張---------------------------- */
.eighth{
width: 100%;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(55, 96, 233);
}
.eighth_header{
width: 1000px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.eighth_header h2{
font-size: 35px;
font-weight: 600;
color: white;
}
.eighth_feet{
width: 800px;
height: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.eighth_feet_one{
width: 180px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.eighth_feet_one img{
width: 150px;
height: 150px;
margin-right: 10px;
}
.eighth_feet_tow{
width: 250px;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 20px;
}
.eighth_feet_tow h4{
font-size: 24px;
font-weight: 600;
color: white;
margin-bottom: 15px;
}
.eighth_feet_tow p{
font-size: 18px;
color: white;
}
.eighth_feet_tow button{
width: 120px;
height: 36px;
border: 1px solid #698fe3;
border-radius: 3px;
color:#14a4e7;
margin-top: 15px;
font-size: 16px;
text-align: center;
line-height: 36px;
background-color: white;
}
.eighth_feet_tow button:hover{
cursor: pointer;
}
/* ----------------------------第九張------------------------------- */
.ninth{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/* align-items: flex-start; */
justify-content: center;
background-color: rgb(22, 30, 48);
}
/* 恢復(fù)原始.ninth布局 */
.ninth_header {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
/* background-color: #14a4e7; */
}
.ninth_header_one {
width: 200px;
height: 500px;
font-size: 15px;
color: rgb(130, 134, 144);
list-style: none;
display: flex;
flex-direction:column;
margin: 20px;
align-items: flex-start;
line-height: 2.5;
}
.ninth_header_one li:nth-child(1){
list-style: none;
font-size: 20px;
color: white;
}
.ninth_header_tow{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
/* background-color: #333; */
/* margin-bottom: 50px; */
width: 200;
height: 500;
}
.ninth_header_tow_tow {
/* background-color: #14a4e7; */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.ninth_header_tow_tow1 {
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ninth_header_tow_tow1 img{
width: 90px;
height: 90px;
margin-bottom: 0px;
}
.ninth_header_tow_tow1 p{
line-height: 2.5;
font-size: 15px;
color: rgb(130, 134, 144);
}
.ninth_header_tow_one h4{
line-height: 2.5;
font-size: 20px;
color: white;
}
.ninth_header_tow_one p{
line-height: 2.5;
font-size: 15px;
color: rgb(130, 134, 144);
}
.ninth_footer{
width: 100%;
/* height: 100%; */
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
margin-left: 85px;
}
.ninth_footer_one{
width: 100%;
/* height: 400PX; */
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
line-height: 2;
}
.ninth_footer_one_ul{
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
line-height: 2.5;
margin-left: 50px;
color: rgb(130, 134, 144);
}
.ninth_footer_one_ul:nth-child(1){
line-height: 2;
font-size: 15px;
color: rgb(130, 134, 144);
margin-left: 150px;
}
.ninth_footer_one_ul li{
line-height: 2;
font-size: 15px;
color: rgb(130, 134, 144);
}
.ninth_footer_tow{
width: 1800px;
height: 45px;
border: 1px solid;
border-color: rgb(130, 134, 144);
border-left: 0;
border-right: 0;
margin-left: 150px;
}
.ninth_footer_tow_ul{
display: flex;
align-items: center;
color: rgb(130, 134, 144);
list-style: none;
justify-content:space-between ;
width: 1000px;
height: 45px;
/* border: 1px solid;
border-color: rgb(130, 134, 144); */
/* margin-left: 150px; */
/* border-left: 0; */
/* border-bottom: 00px;
border-top: 2000px; */
/* border-right: 0; */
/* margin-right: 10px; */
}
.ninth_header_tow_ul li{
/* padding: 20px;
margin-right: 40px; */
letter-spacing: 50px;
}
.ninth_footer_three{
display: flex;
width: 1500;
height: 100px;
flex-direction: column;
/* background-color: #15516c; */
/* justify-content: center; */
}
.ninth_footer_three_one{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: rgb(130, 134, 144);
margin-left: 150px;
}.ff{
width: 700px;
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: rgb(130, 134, 144);
/* margin-left: 150px; */
}
.ninth_footer_three_tow{
display: flex;
flex-direction: column;
/* justify-content: space-between; */
/* align-items: center; */
color: rgb(130, 134, 144);
margin-left: 150px;
/* background-color: #15516c; */
}
###效果展示
[圖片上傳失敗...(image-8bf452-1742808928259)]]
2025-03-24
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- ①口腔黏膜（以舌表面為主） 燒灼樣疼痛，或具有異常感為主訴，疼痛為晨輕晚重，空閑時(shí)加重，工作、吃飯、熟睡時(shí)反而減輕...
- 《以色彩為詩(shī)，用妝容書(shū)寫(xiě)生活的溫柔敘事》 親愛(ài)的，你知道嗎？彩妝不是面具，而是一支神奇的畫(huà)筆，讓每個(gè)平凡的日子都能...
- 養(yǎng)成隨手解決小事的習(xí)慣，最大的意義是什么？那就是是漸漸獲得“自己可以解決任何事情”的信念，并且形成高效解決問(wèn)題的思...
