小鹅通效果图如下
image.png
代码实现
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鹅通封面</title>
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" href="./font_aowst35o1b/iconfont.css">
</head>
<body>
<!-- 导航+切换图片 -----START----------->
<div class="bgr header">
<div class="w-content">
<div class="nav">
<div class="left">
<img src="img\下载.png" alt="">
<p>首页</p>
<p>解决方案</p>
<p>产品服务</p>
<p>价格</p>
<p>活动</p>
<p>案例</p>
<p>渠道合作</p>
<p>下载与帮助</p>
<p>关于我们</p>
</div>
<div class="right">
<P>我是学员</P>
<p>商家登录</p>
<p>免费试用</p>
</div>
</div>
<div class="im">
<img src="img\m7vnx1ni0dmw.webp" alt="">
</div>
</div>
</div>
<!-- 导航+切换图片 -------END------------->
<!-- 我们的产品能力-------START------------->
<div class="bg chanpin">
<div class="content">
<div class="head">
<p>我们的产品能力</p>
</div>
<div class="img">
<img src="img\m3moa2m10v5k.webp" alt="">
</div>
<div class="nav">
<div class="zuo">
<ul>
<li>知识店铺</li>
<li>一分钟搭建您的知识商城<br>
助力高效知识变现</li>
<li>免费试用-></li>
</ul>
</div>
<div class="zhong">
<ul>
<li>私域直播</li>
<li>企业级私域直播平台<br>
实现私域流量高效运营</li>
<li>免费试用-></li>
</ul>
</div>
<div class="you">
<ul>
<li>企微SCRM</li>
<li>企业微信私域运营神器<br>
数据洞察驱动业绩增长</li>
<li>免费试用-></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 我们的产品能力-------END----------------->
<!-- 我们的场景解决方案---------START -->
<div class="bg changjing">
<div class="content">
<div class="shang">
<p>我们的场景解决方案</p>
</div>
<div class="zhong">
<ul>
<li>公域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数字化运营</li>
</ul>
</div>
<div class="xia">
<div class="zuo">
<img src="img\m10c72vn0zzo.webp" alt="">
</div>
<div class="you">
<h3>公域获客</h3>
<h4>多渠道获客，沉淀私域流量池</h4>
<p>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</p>
<p>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</p>
<p>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</p>
<div class="btns">
<p>免费试用</p>
<p>了解详情</p>
</div>
</div>
</div>
</div>
</div>
<!-- 我们的=场景解决方案---------END -->
<!-- 我们的行业解决方案-----START--- -->
<div class="bg hangye">
<div class="content">
<div class="head">
<p>我们的行业解决方案</p>
</div>
<div class="nav">
<div class="zuo">
<p><i class="iconfont icon-mendian"></i>新零售门店</p>
<p><i class="iconfont icon-gongjuxiang"></i>职业培训</p>
<p><i class="iconfont icon-diandengpao"></i>知识付费</p>
<p><i class="iconfont icon-meinvoff"></i>美业直播</p>
</div>
<div class="zhong">
<div class="shang">
<h1>新零售门店解决方案</h1>
<p>私域直播带货+推广门店体系，助力大健康商家私域流量高效变现</p>
<div class="cont">
<div class="shang"><p><i class="iconfont icon-zhibodaihuobang"></i>直播带货</p>
<p><i class="iconfont icon-zaixianshangcheng"></i>在线商城</p>
<p><i class="iconfont icon-mendianguanli"></i>门店管理</p>
<p><i class="iconfont icon-mendianhexiao"></i>门店核销</p>
<p><i class="iconfont icon-qudaohuoma"></i>渠道活码</p>
</div>
<div class="xia">
<p><i class="iconfont icon-hongbao"></i>直播红包</p>
<p><i class="iconfont icon-choujiang"></i>直播抽奖</p>
<p><i class="iconfont icon-bangdan"></i>邀请达人榜</p>
<p><i class="iconfont icon-naozhong"></i>商品秒杀</p>
</div>
</div>
</div>
<div class="btn">
<p>免费试用</p>
<p>了解详情</p>
</div>
</div>
<div class="you">
<p>行业案例</p>
<div class="imgs">
<img src="img\m1hheam904gz.webp" alt="">
<img src="img\m1hheam80kuz.webp" alt="">
<img src="img\m1hhealy0hhi.webp" alt="">
<img src="img\m1hheama0m8b.webp" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- 我们的行业解决方案----END------------ -->
<!-- 我们的技术优势--------START--------- -->
<div class="bg jishu">
<div class="content">
<div class="shang">
<p>我们的技术优势</p>
</div>
<div class="bttom">
<div class="over"></div>
<div class="zuo">
<h1>超稳定</h1>
<p>✔️多云负载均衡/全球CDN加速</p>
</div>
<div class="zhong">
<h1>高并发</h1>
<p>✔️支持多用户同时在线</p>
</div>
<div class="you">
<h1>超流畅</h1>
<p>✔️观看端自动探测并自动跨云线路切换</p>
</div>
</div>
</div>
</div>
<!-- 我们的技术优势--------END--------- -->
<!-- 运营方案----START------------------>
<div class="bg yunying">
<div class="w-content">
<div class="top">
<p>我们的运营服务</p>
</div>
<div class="bottom">
<div class="zuo">
<img src="img\服务_本地社群.png" alt="">
<h1>社群服务</h1>
<p>标杆商家分享，同行商家交流，总比别人快一步</p>
</div>
<div class="zhong1">
<img src="img\摄图网_501221054_商务女士打电话（企业商用）@3x.png" alt="">
<h1>管家服务</h1>
<p>客户经理、服务管家、多角色在群、服务全面包围</p>
</div>
<div class="zhong2">
<img src="img\大客服务.png" alt="">
<h1>大客服务</h1>
<p>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</p>
</div>
<div class="you">
<img src="img\运维服务.png" alt="">
<h1>运维服务</h1>
<p>需求24小时反馈，需求处理率大于%90，产品经理1V1回复</p>
</div>
</div>
</div>
</div>
<!-- 运营方案----END------------------>
<!-- 他们都在用小鹅通------START------ -->
<div class="bg xiaoetong">
<div class="w-content">
<div class="top">
<h1>他们都在用小鹅通</h1>
<p>(*排名不分先后顺序)</p>
</div>
<div class="box">
<div class="zuo">
<img src="img\m1h8lf0u08nd.webp" alt="">
<h1>小红书·种草学</h1>
<p>小红书种草学是小红书官方营销学习平台，为不同行业、不同成长阶段的品牌和商家提供丰富多元的学习内容。小红书种草学与小鹅通深度合作，通过搭建培训平台让赋能客户变得...</p>
</div>
<div class="zhong">
<img src="img\m1h8lf0q0gqq.webp" alt="">
<h1>刘润·进化的力量</h1>
<p>主要提供商业和管理相关知识传播并和为企业提供商业战略咨询服务。小鹅通为刘润打造了专属进化岛圈子，为刘润和用户提供了深度互动平台</p>
</div>
<div class="you">
<img src="img\m1h8lf0v0sw4.webp" alt="">
<h1>博商大课堂</h1>
<p>专注于；为中小民营企业家提供管理培训/咨询辅导和资源互助等全生命周期服务，构筑全球17座城市的教学网络，汇聚高校专家与实战导师帮助10万余企业家实现成长升华，并多...</p>
</div>
</div>
<div class="img">
<div class="yihang">
<img src="img\一行.png" alt="">
</div>
<div class="erhang">
<img src="img\2行.png" alt="">
</div>
<div class="sanhang">
<img src="img\3行.png" alt="">
</div>
</div>
<div class="btn">
<p>查看更多案例></p>
</div>
</div>
</div>
<!-- 他们都在用小鹅通------END------ -->
<!-- 扫码--------------START-------- -->
<div class="bg saoma">
<div class="w-content">
<div class="shang">
<h1>立即扫码咨询，领取您的专属解决方案</h1>
</div>
<div class="xia">
<div class="zuo">
<img src="img\m2cobck10ujl.webp" alt="">
</div>
<div class="you">
<p>扫码添加客户经理或者您也可以先</p>
<p>免费试用</p>
</div>
</div>
</div>
</div>
<!-- 扫码--------------END-------- -->
<!-- 页脚 -------------START-------------->
<div class="bg yejiao">
<div class="content">
<div class="top">
<div class="changjing">
<h1>场景</h1>
<p>全域获客</p>
<p>私域运营</p>
<p>直播带货</p>
<p>内容交付</p>
<p>数据化运营</p>
<p>企业内训</p>
</div>
<div class="hangye">
<h1>行业</h1>
<p>零售电商</p>
<p>职业培训</p>
<p>知识付费</p>
<p>企业营销</p>
<p>美业直播</p>
<p>企业培训</p>
<p>社区团购</p>
<p>营销会务</p>
</div>
<div class="chanpin">
<h1>产品</h1>
<p>知识店铺</p>
<p>私域直播</p>
<p>企微SCRM</p>
<p>企学院</p>
<p>智能投放</p>
<p>海外版elink</p>
<p>小鹅云</p>
</div>
<div class="fuwu">
<h1>服务</h1>
<p>小鹅创业社区</p>
<p>本地社群</p>
<p>教练联盟</p>
<p>小鹅通训练营</p>
<p>对话标杆</p>
</div>
<div class="guanyuwomen">
<h1>关于我们</h1>
<p>公司简介</p>
<p>加入我们</p>
<p>媒体报道</p>
<p>更多资讯</p>
<p>客户案例</p>
<p>帮助中心</p>
</div>
<div class="meitibaodao">
<h1>媒体报道</h1>
<p>D轮融资1.2亿美元,小鹅通究竟在做什么？</p>
<p>知识付费用户达5.27亿,内容创业的下半场风...</p>
<p>知识工作者的终极梦想,可能是拥有一个"第...</p>
<p>小鹅通:让知识更有价值</p>
<p>小鹅通联合艾瑞咨询发布《2023年中国私域...</p>
</div>
<div class="lianxi">
<h1>400-102-6665</h1>
<p>周一至周日 9:00-21:00</p>
<div class="img">
<div class="nav1">
<img src="img\下载 (1).png" alt="">
<p>关注小鹅通公众号</p>
</div>
<div class="nav2">
<img src="img\小鹅创业社区-公众号二维码-20240102163357.jpg" alt="">
<p>进入小鹅创业社区</p>
</div>
</div>
</div>
</div>
<div class="nav">
<div class="dizhi">
<p>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</p>
<p>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</p>
<p>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</p>
</div>
<div class="hezuo">
<p>商务合作：support@xiaoe-tech.com</p>
<p>渠道合作：partner@xiaoe-tech.com</p>
<p>投诉意见：xiaoeks@xiaoe-tech.com</p>
</div>
<div class="fankui">
<p>互联网违法和不良信息举报电话：0755-26409534</p>
<p>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</p>
<p>安全漏洞反馈邮箱：security@xiaoe-tech.com</p>
</div>
</div>
<div class="lianjie">
<p>友情链接</p>
<p>知识付费软件</p>
<p>知识付费平台</p>
<p>小鹅通企学院</p>
<p>私域直播工具</p>
<p>小鹅通APP</p>
<p>小鹅创业社区</p>
<p>小鹅通移动版</p>
<p>小鹅通学员版</p>
</div>
<div class="bottom"></div>
</div>
</div>
<!-- 页脚 -------------END-------------->
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.bg{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* 让图片显示 */
.bgr{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
/* background-color:azure; */
}
.w-content{
width: 1200px;
}
.content{
width: 1000px;
}
/* 导航+切换图片-----------START----------- */
.header .w-content{
height: 437px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.header .w-content .nav{
width: 1800px;
height: 72px;
display: flex;
justify-content: space-between;
align-items: center;
/* 设置背景颜色 */
/* 背景颜色设置为透明 */
background-color: transparent;
}
.header .w-content .nav:hover{
background-color: #fff;
}
.header .w-content .nav .left{
width: 1200px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.header .w-content .nav .left p{
font-size: 25px;
cursor: pointer;
}
.header .w-content .nav .left p:hover{
font-weight: 900px;
}
.header .w-content .nav .left img{
height: 40px;
width: 120px;
}
.header .w-content .nav .right {
font-size: 24px;
flex: 1;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.header .w-content .nav .right p:nth-of-type(1){
color: black;
cursor: pointer;
}
.header .w-content .nav .right p:nth-of-type(2),
.header .w-content .nav .right p:nth-of-type(3){
height: 50px;
width: 100px;
line-height: 50px;
border: solid 1px #4872f6;
border-radius: 7px;
color:#4872f6;
cursor: pointer;
}
.header .w-content .nav .right p:nth-of-type(2):hover,
.header .w-content .nav .right p:nth-of-type(3){
background-color:#4872f6;
color: white;
}
.header .w-content .nav .right p:nth-of-type(3):hover{
background-color: white;
color: #4872f6;
}
.header .w-content .im{
flex: 1;
/* 图片定位，将图片放进头部中 */
position: relative;
}
.header .w-content .im img{
width: 1800px;
height: 437px;
position: absolute;
/* 图片上移 */
top: -72px;
/* 图片左移 */
left: -900px;
/* 显示导航栏 */
z-index:-1;
}
/* 导航+切换图片------------END---------------- */
/* 我们的产品能力-----------START------------------- */
.bg.chanpin{
background-color:azure;
}
.chanpin .content{
height: 705px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.chanpin .content .head{
margin-bottom: 10px;
height: 40px;
}
.chanpin .content .head p{
font-size: 40px;
font-weight: 800;
}
.chanpin .content .img img{
width: 900px;
height: 350px;
}
.chanpin .content .nav{
height: 139px;
display: flex;
justify-content: space-evenly;
}
.chanpin .content .nav .zuo,
.chanpin .content .nav .zhong,
.chanpin .content .nav .you{
width: 295px;
height: 139px;
/* border: solid 1px black; */
border-radius: 8px;
margin: 7.5px;
background-color: rgb(255, 255, 255);
}
.chanpin .content .nav .zuo ul,
.chanpin .content .nav .zhong ul,
.chanpin .content .nav .you ul{
list-style: none;
padding: 9px;
font-size: 18px;
}
.chanpin .content .nav .zuo ul li,
.chanpin .content .nav .zhong ul li,
.chanpin .content .nav .you ul li{
cursor: pointer;
}
.chanpin .content .nav .zuo ul li:nth-of-type(1),
.chanpin .content .nav .zuo ul li:nth-of-type(3),
.chanpin .content .nav .zhong ul li:nth-of-type(3),
.chanpin .content .nav .you ul li:nth-of-type(3){
color: #4872f6;
}
.chanpin .content .nav .zuo ul li:nth-of-type(3),
.chanpin .content .nav .zhong ul li:nth-of-type(3),
.chanpin .content .nav .you ul li:nth-of-type(3){
padding-top: 15px;
}
/* 我们的产品能力----------END-------------------- */
/* 我们的场景解决方案------START-------------------------- */
.bg.changjing{
background-color:azure;
}
.changjing .content{
height: 630px;
display: flex;
flex-direction: column;
}
.changjing .content .shang{
display: flex;
justify-content: center;
}
.changjing .content .shang p{
font-size: 40px;
font-weight: 800;
}
.changjing .content .zhong{
display: flex;
justify-content: center;
}
.changjing .content .zhong ul{
width: 515px;
height: 30;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
border-radius: 25px;
background-color: white;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.changjing .content .zhong li{
width: 103px;
height: 30px;
/* 文本左右居中 */
text-align: center;
/* 文本上下居中 */
line-height: 30px;
}
.changjing .content .zhong li:nth-of-type(1){
background-color:#4872f6;
color: white;
border-radius: 25px;
}
.changjing .content .xia{
display:flex;
background-color:white;
}
.changjing .content .xia .zuo,
.changjing .content .xia .zuo img{
width: 425px;
height: 375px;
}
.changjing .content .xia .you{
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 20px;
margin-left: 50px;
}
.changjing .content .xia .you h3{
font-size: 35px;
font-weight: 900;
}
.changjing .content .xia .you h4{
font-size: 25px;
}
.changjing .content .xia .you .btns{
display: flex;
/* 免费试用与了解详情之间的距离 */
gap: 30px;
}
.changjing .content .xia .you .btns p{
border: solid 1px #4872f6;
border-radius: 8px;
width: 90px;
height: 32px;
/* 文本左右居中 */
text-align: center;
/* 文本上下居中 */
line-height: 27px;
color: #4872f6;
cursor: pointer;
}
.changjing .content .xia .you .btns :nth-of-type(1),
.changjing .content .xia .you .btns p:nth-of-type(2):hover{
background-color:#4872f6;
color: white;
}
.changjing .content .xia .you .btns p:nth-of-type(1):hover{
background-color: white;
color: #4872f6;
}
/* 我们的场景解决方案------END-------------------------- */
/* 我们的行业解决方案-------START------------------------- */
.bg.hangye {
/* 添加背景图片 */
background-image: url('E:/cloudprograr2024/code/me/html/xaioetong/xiaoetong/img/m0w7ssdh01vr.png');
/* 背景图片大小 */
background-size: 1800px 520px;
/* 背景图片不重复 */
background-repeat: no-repeat;
/* 背景图片 水平居中 垂直居中 */
background-position: center center;
}
.hangye .content{
height: 520px;
display: flex;
flex-direction: column;
color: #fff;
/* 阴影效果 颜色 X轴偏移 Y轴偏移 模糊距离 */
/* box-shadow: #888 10px 10px 10px; */
/* 毛玻璃背景效果 */
backdrop-filter: blur(5px);
}
.hangye .content .head{
justify-content: center;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
font-weight: 700;
}
.hangye .content .nav{
display: flex;
justify-content: space-between;
}
.hangye .content .nav .zuo{
font-size: 18px;
width: 150px;
height: 330px;
}
.hangye .content .nav .zuo p{
margin-bottom: 30px;
cursor: pointer;
}
.hangye .content .nav .zuo p i{
margin-right: 8px;
}
.hangye .content .nav .zhong{
flex: 1;
height: 330px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hangye .content .nav .zhong .shang{
height: 280px;
}
.hangye .content .nav .zhong .shang h1,
.hangye .content .nav .zhong .shang p{
margin-bottom: 10px;
}
.hangye .content .nav .zhong .shang .cont{
height: 150px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: first baseline;
}
.hangye .content .nav .zhong .shang .cont .shang,
.hangye .content .nav .zhong .shang .cont .xia{
display: flex;
justify-content: space-evenly;
font-size: 16px;
}
.hangye .content .nav .zhong .shang .cont p{
cursor: pointer;
border: solid 1px white;
width: 100px;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 14px;
}
.hangye .content .nav .zhong .shang .cont p i{
margin-bottom: 1px;
}
.hangye .content .nav .zhong .btn{
display: flex;
}
.hangye .content .nav .zhong .btn p{
margin-right: 30px;
border: solid 2px #4872f6;
border-radius: 8px;
width: 70px;
height: 40px;
color: #4872f6;
cursor: pointer;
text-align: center;
line-height: 30px;
}
.hangye .content .nav .zhong .btn p:nth-of-type(1){
color: #fff;
background-color: #4872f6;
}
.hangye .content .nav .zhong .btn p:nth-of-type(1):hover{
font-weight: 800;
}
.hangye .content .nav .zhong .btn p:nth-of-type(2):hover{
color: #fff;
}
.hangye .content .nav .zhong .btn p:nth-of-type(2){
color:#4872f6;
}
.hangye .content .nav .you{
width: 240px;
height: 330px;
}
.hangye .content .nav .you .imgs img{
width: 78px;
height: 78px;
}
/* 我们的行业解决方案-------END------------------------- */
/* 我们的技术优势-------START------------- */
.jishu .content{
height: 470px;
display: flex;
flex-direction: column;
}
.jishu .content .shang{
height: 72px;
display: flex;
justify-content: center;
}
.jishu .content .shang p{
font-size: 40px;
font-weight: 800;
}
.jishu .content .bttom{
width: 990px;
display: flex;
justify-content: space-between;
color:#fff;
}
.jishu .content .bttom .over{
width: 475px;
height: 360px;
background-color: rgba(21, 21, 231, 0.288);
position: absolute;
border-radius: 10px;
}
.jishu .content .bttom .zuo{
display: flex;
flex-direction: column;
justify-content: center;
width: 480px;
height: 360px;
margin-right: 10px;
border-radius: 10px;
background-image: url('E:/cloudprograr2024/code/me/html/xaioetong/xiaoetong/img/m04n363d0eas.png');
}
.jishu .content .bttom .zuo h1{
margin-bottom: 10px;
}
.jishu .content .bttom .zuo h1,
.jishu .content .bttom .zuo p{
margin-left: 30px;
}
.jishu .content .bttom .zhong{
display: flex;
flex-direction: column;
justify-content: center;
width: 250px;
height: 360px;
margin-right: 10px;
border-radius: 10px;
background-image: url('E:/cloudprograr2024/code/me/html/xaioetong/xiaoetong/img/m04n363709k8.webp');
}
.jishu .content .bttom .zhong h1{
margin-bottom: 10px;
}
.jishu .content .bttom .zhong h1,
.jishu .content .bttom .zhong p{
margin-left: 30px;
}
.jishu .content .bttom .you{
display: flex;
flex-direction: column;
justify-content: center;
width: 250px;
height: 360px;
border-radius: 10px;
background-image: url('E:/cloudprograr2024/code/me/html/xaioetong/xiaoetong/img/m04n363e0jjz.webp')
}
.jishu .content .bttom .you h1{
margin-bottom: 10px;
}
.jishu .content .bttom .you h1,
.jishu .content .bttom .you p{
margin-left: 30px;
}
/* 我们的技术优势---------END---------------- */
/* 运营方案----START------------------------- */
.yunying .w-content{
height: 520px;
display: flex;
flex-direction: column;
/* align-items: center; */
}
.yunying .w-content .top{
display: flex;
justify-content: center;
height: 72px;
font-size: 40px;
font-weight: 800;
}
.yunying .w-content .bottom{
display: flex;
}
.yunying .w-content .bottom .zuo,
.yunying .w-content .bottom .zhong1,
.yunying .w-content .bottom .zhong2,
.yunying .w-content .bottom .you{
width: 288px;
height: 240px;
}
.yunying .w-content .bottom .zuo,
.yunying .w-content .bottom .zhong1,
.yunying .w-content .bottom .zhong2{
margin-right: 16px;
}.yunying .w-content .bottom .zuo h1,
.yunying .w-content .bottom .zhong1 h1,
.yunying .w-content .bottom .zhong2 h1,
.yunying .w-content .bottom .you h1{
margin-top: 15px;
margin-bottom: 15px;
}
.yunying .w-content .bottom .zuo img,
.yunying .w-content .bottom .zhong1 img,
.yunying .w-content .bottom .zhong2 img,
.yunying .w-content .bottom .you img{
width: 288px;
height: 152px;
border-radius: 10px;
}
/* 运营方案-----------END------------------------- */
/* 他们都在用小鹅通----------START---------------------------------- */
.xiaoetong{
background: linear-gradient( to bottom, #87CEEB,#B0E0E6);
}
.xiaoetong .w-content{
height: 755px;
display: flex;
flex-direction: column;
align-items: center;
}
.xiaoetong .w-content .top{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 70px;
margin-bottom: 25px;
}
.xiaoetong .w-content .top h1{
font-size: 40px;
font-weight: 800;
margin-bottom: 10px;
}
.xiaoetong .w-content .top p{
color: gray;
}
.xiaoetong .w-content .box{
display: flex;
align-items: center;
}
.xiaoetong .w-content .box .zuo,
.xiaoetong .w-content .box .zhong,
.xiaoetong .w-content .box .you{
width: 290px;
height: 290px;
background-color: #fff;
border-radius: 9px;
}
.xiaoetong .w-content .box .zuo,
.xiaoetong .w-content .box .zhong{
margin-right: 15px;
}
.xiaoetong .w-content .box .zuo img,
.xiaoetong .w-content .box .zhong img,
.xiaoetong .w-content .box .you img{
width: 280px;
height: 161px;
border-radius: 6px;
}
.xiaoetong .w-content .box .zuo h1,
.xiaoetong .w-content .box .zhong h1,
.xiaoetong .w-content .box .you h1{
margin-bottom: 10px;
}
.xiaoetong .w-content .img{
display: flex;
flex-direction: column;
}
.xiaoetong .w-content .img img{
width: 1200px;
height: 62px;
}
.xiaoetong .w-content .btn{
width: 120px;
height: 40px;
color: #4872f6;
border: solid #4872f6;
border-radius: 8px;
margin-top: 30px;
}
.xiaoetong .w-content .btn p{
text-align: center;
line-height: 30px;
cursor: pointer;
}
/* 他们都用小鹅通------------END------------------------------------------ */
/* 扫码------START------------------------------------------------------------ */
.saoma{
background-color:#4872f6;
}
.saoma .w-content{
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
}
.saoma .w-content .shang{
font-size: 17px;
font-weight: 800;
margin-top: 30px;
margin-bottom: 30px;
color: #fff;
}
.saoma .w-content .xia{
display: flex;
}
.saoma .w-content .xia .you{
margin-left: 25px;
}
.saoma .w-content .xia .you p:nth-of-type(1){
font-size: 18px;
width: 160px;
color: #fff;
margin-bottom: 23px;
}
.saoma .w-content .xia .you p:nth-of-type(2){
width: 130px;
height: 35px;
background-color: #fff;
border-radius: 3px;
color:#4872f6;
font-size: 18px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.saoma .w-content .xia img{
width: 106px;
height: 106px;
}
/* 扫码----------------END--------------------------------------------------- */
/* 页脚------------------------START------------------------------------------ */
.yejiao{
background-color: #161e30;
}
.yejiao .content{
width: 1200px;
height: 920px;
display: flex;
flex-direction: column;
color: #fff;
}
.yejiao .content .top{
height: 420px;
display: flex;
}
.yejiao .content .top .changjing,
.yejiao .content .top .hangye,
.yejiao .content .top .chanpin,
.yejiao .content .top .fuwu,
.yejiao .content .top .guanyuwomen,
.yejiao .content .top .meitibaodao,
.yejiao .content .top .lianxi{
padding:40px 10px;
}
.yejiao .content .top .changjing h1,
.yejiao .content .top .hangye h1,
.yejiao .content .top .chanpin h1,
.yejiao .content .top .fuwu h1,
.yejiao .content .top .guanyuwomen h1,
.yejiao .content .top .meitibaodao h1,
.yejiao .content .top .lianxi h1{
margin-bottom: 20px;
}
.yejiao .content .top .changjing h1,
.yejiao .content .top .hangye h1,
.yejiao .content .top .chanpin h1,
.yejiao .content .top .fuwu h1,
.yejiao .content .top .guanyuwomen h1,
.yejiao .content .top .meitibaodao h1{
font-size: 17px;
}
.yejiao .content .top .changjing p,
.yejiao .content .top .hangye p,
.yejiao .content .top .chanpin p,
.yejiao .content .top .fuwu p,
.yejiao .content .top .guanyuwomen p,
.yejiao .content .top .meitibaodao p{
margin-bottom: 17px;
color:rgb(161, 164, 164);
cursor: pointer;
}
.yejiao .content .top .hangye{
margin-right: 10px;
}
.yejiao .content .top .lianxi p{
margin-bottom: 17px;
color:rgb(161, 164, 164);
}
.yejiao .content .top .lianxi .img{
display: flex;
}
.yejiao .content .top .lianxi img:nth-of-type(1),
.yejiao .content .top .lianxi img:nth-of-type(2){
width: 110px;
height: 110px;
}
.yejiao .content .top .lianxi .nav1{
margin-right: 30px;
}
.yejiao .content .top .lianxi .nav1 p,
.yejiao .content .top .lianxi .nav2 p{
width: 115px;
}
.yejiao .content .top .lianxi{
margin-left: 50px
}
.yejiao .content .nav{
width: 100%;
height: 174px;
display: flex;
}
.yejiao .content .nav .dizhi{
margin-right: 30px;
width: 430px;
height: 174px;
}
.yejiao .content .nav .hezuo{
margin-right: 10px;
width: 300px;
height: 174px;
}
.yejiao .content .nav .fankui{
width: 320px;
height: 174px;
}
.yejiao .content .nav .dizhi p,
.yejiao .content .nav .hezuo p,
.yejiao .content .nav .fankui p{
margin-bottom: 10px;
}
.yejiao .content .lianjie{
height: 50px;
border-bottom: solid 1px white;
border-top: solid 1px white;
display: flex;
}
.yejiao .content .lianjie p{
width: 100px;
line-height: 45px;
font-size: 10px;
cursor: pointer;
}
/* 页脚---------------END-------------------------------------- */