代碼實(shí)現(xiàn)

....css

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html,
body {
height: 100%;
width: 100%;
}

ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
list-style-type: none;

}
.start {
width: 100%;
height: 72px;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: solid 1px#ddd;
color: #333;
}

.start .logo {
width: 8000px;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
}

.start .logo ul {
width: 800px;
height: 70px;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}

.start .logo li{
cursor: pointer;
}

.start .logo li:hover {
font-weight: 500;
color: #1e75de;

}

.bg-header .start .logo li img {
width: 126px;
height: 39px;
}

.bt {
width: 400px;
height: 70px;
display: flex;
justify-content: space-evenly;
align-items: center;
}

.bt div:nth-of-type(1):hover {
color: #4872f6;
font-weight: 500;
cursor: pointer;
}

.bt div:nth-of-type(2),
.bt div:nth-of-type(3) {
width: 125px;
height: 46px;
border: solid 1px #4872f6;
color: #4872f6;
background-color: #fff;
text-align: center;
line-height: 42px;
border-radius: 8px;
font-weight: 300;
font-size: 16px;
cursor: pointer;
transition: all.2s;
}

.bt div:nth-of-type(2):hover {
background-color: #4872f6;
color: white;
transition: all.2;
}

.bt div:nth-of-type(3):hover {
background-color: #4872f6;
color: white;
transition: all.2s;
}

.bg-header {
width: 100%;
height: 600px;

}

.bg-header img {
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}

.chanpin {
height: 1129.5px;
width: 100%;
padding: 104px;
display: flex;
justify-content: center;
background: linear-gradient(114deg, rgb(255, 255, 255) 13.17%, rgb(243, 250, 255) 29.92%, rgb(245, 248, 255) 51.05%);
}

.chanpin .content {
width: 1400px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.chanpin .content img {
width: 1400px;
height: 595px;
margin-top: 20px;
}

.title {
font-size: 50px;
font-weight: 600;
padding: 20px;
}

.item-list {
width: 1400px;
height: 200px;
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 30px;
}

.item-box {
width: 350px;
height: 180px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 .2083rem #1472ff inset;
margin-top: 20px;
border-radius: 5px;
cursor: pointer;
background: #fff;
}

.item-start {
font-size: 30px;
font-weight: 400;
}

.item-between {
width: 180px;
height: 60px;
font-size: 16px;
font-weight: 40;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}

.item-end {
display: flex;
align-items: center;
color: #1472ff;
width: 60px;
font-size: 15px;
}

.changjing {
height: 1003px;
width: 100%;
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(162deg, rgb(255, 255, 255) 13.07%, rgb(238, 242, 250) 40.59%, rgb(227, 236, 247) 103.39%);
}

.changjing .content {
width: 100%;
height: 100%;
display:flex;
flex-direction: column;
align-items:center;
justify-content: space-evenly;
}

.changjing .content .title {
text-align: center;
font-family: PingFang SC;
font-size: 50px;
font-weight: 600;
display: flex;
justify-content: center;
}

.nav {
width: 850px;
height: 50px;
border-radius: 25px;
background-color: #fff;
margin-top: 20px;
list-style: none;

display: flex;
justify-content: space-between;

}

.nav li {
width: 130px;
height: 50px;
/* 文本左右居中 /
text-align: center;
/ 文本50px高度下 上下居中 */
line-height: 50px;
}

.nav li.active {
background-color: #4872f6;
color: white;
border-radius: 25px;
}

.intro {
width: 1400px;
height: 600px;
border-radius: 10px;
margin-top: 20px;
border: solid 2px #fff;
overflow: hidden;
background-color: #fff;
display: flex;
}

.left img {
width: 700px;
height: 600px;
}

.changjing .content .intro .right {
width: 700px;
height: 600px;
/* background-color:antiquewhite; */
padding: 80px;
display: flex;
flex-direction: column;
justify-content: space-around;

}

.right h3 {
font-size: 28px;

}

.right h4 {
font-size: 26px;
font-weight: 400;

}

.changjing .content .intro .right p {
color: gray;
background-image: url(./img/xinxin.png);
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 30px;

}

.right .btns {
display: flex;
gap: 30px;

}

.right .btns div {
width: 120px;
height: 40px;
font-size: 14px;
border: solid 1px #4872f6;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: #4872f6;
cursor: pointer;

}

.right .btns div:nth-of-type(1) {
background-color: #4872f6;
color: white;

}

.right .btns div:nth-of-type(2) {
color: #4872f6;
transition: .3 all;
}

.right .btns div:nth-of-type(2):hover{
color: white;
background-color: #4872f6;
}
.hangye {
height: 832px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 0%;
padding-top: 60px;
padding-bottom: 60px;
padding-right: 0%;
background-size: cover !important;
background-position: center center !important;
}

.hangye .title {
color: white;
text-align: center;
font-family: PingFang SC;
font-size: 48px;
font-weight: 600;
}

.hangye .nav-box img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hangye .content {
width: 1380px;
height: 460px;
margin-top: 28px;
position: relative;
background-color: rgba(57, 65, 76, .3);
backdrop-filter: blur(.15625rem);
border-radius: 10px;
}

.hangye .content .left {
position: absolute;
left: 0;
width: 200px;
height: 460px;
background: rgba(57, 65, 76, .5);
padding: 1.6667rem 1.25rem;
border-radius: 8px 0 0 8px;
}

.left-1 {
display: flex;
align-items: center;
color: #fff !important;
opacity: 1 !important;
border-radius: 0;
text-align: center;
width: 170px;
height: 64px;
font-size: 18px;
font-weight: 500;
padding-left: 36px;
border-radius: 4px 0 0 4px;
background: linear-gradient(90deg, rgba(20, 114, 255, .86) -39.08%, rgba(21, 115, 255, 0) 96.33%);
padding-left: 26px;
transition: all .3s;
cursor: pointer;
}
.hangye .content .left:hover{
color: rgba(57, 65, 76, .5);
transition: all .3s;
background-color:linear-gradient(90deg, rgba(20, 114, 255, .86) -39.08%, rgba(21, 115, 255, 0) 96.33%) ;
}
.hangye .content .left img{
width: 20px;
height: 20px;
left: 10px;
overflow: clip;
}
.left-2 {
display: flex;
align-items: center;
color: #fff !important;
opacity: 1 !important;
border-radius: 0;
width: 170px;
height: 64px;
font-size: 18px;
font-weight: 500;
padding-left: 28px;
border-radius: 4px 0 0 4px;
padding-left: 26px;
transition: all .3s;
cursor: pointer;
}

.left-3 {
display: flex;
align-items: center;
color: #fff !important;
opacity: 1 !important;
border-radius: 0;
width: 170px;
height: 64px;
font-size: 18px;
font-weight: 500;
padding-left: 28px;
border-radius: 4px 0 0 4px;
cursor: pointer;
padding-left: 26px;
transition: all .3s;
}

.left-4 {
display: flex;
align-items: center;
color: #fff !important;
opacity: 1 !important;
border-radius: 0;
width: 170px;
height: 64px;
font-size: 18px;
font-weight: 500;
padding-left: 28px;
border-radius: 4px 0 0 4px;
cursor: pointer;
padding-left: 26px;
transition: all .3s;
}

.hangye .content .between {
width: 880px;
height: 400px;
padding-left: 200px;
display: flex;
flex-direction: column;
}
.between-content{
width: 680px;
height: 100%;
padding: 40px;
}
.bc-title{
color: #fff;
font-family: PingFang SC;
font-size: 27px;
font-weight: 500;
}
.bc-title2{
margin-top: 15px;
color: #f5f5f5;
font-family: PingFang SC;
font-size: 15px;
font-weight: 400;
}
.bc-list{
width: 550px;
display: flex;
flex-wrap: wrap;
margin-top: 30px;
}
.list-item{
height: 86px;
width: 86px;
border: 0.4px solid rgba(255, 255, 255, .2);
border-radius: 4px;
margin-right: 23px;
margin-bottom: 23px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.list-item i{
color: #f5f5f5
}
.list-item-text{
margin-top: 10px;
color: #f5f5f5;
font-family: PingFang SC;
font-size: 13.5px;
font-weight: 500;
}
.hangye .content .right {
width: 300px;
height: 400px;
position: absolute;
top: 0;
right: 0;
margin-top: 2.0833rem;
border-left: .00521rem solid rgba(255, 255, 255, .1019607843);
padding: 2.5rem 2.6042rem 0 2.8646rem;
}
.right-title{
color: #fff;
font-family: PingFang SC;
font-size: 19px;
font-weight: 500;
margin-left: 11.5px;
}
.content-btn{
position: absolute;
bottom:40px;
left: 240px;
}
.content-btn .button{
display: flex;
align-items: center;
gap: 30px;
cursor: pointer;
}

.content-btn .button div {
width: 120px;
height: 40px;
border: solid 1px #4872f6;
border-radius: 5px;
text-align: center;
font-size: 15px;
line-height: 38px;
color: #4872f6;
cursor: pointer;

}

.content-btn .button div:nth-of-type(1) {
background-color: #4872f6;
color: white;

}

.content-btn .button div:nth-of-type(2) {
color: #4872f6;
transition: .3 all;
}
.content-btn .button div:nth-of-type(1):hover{
color: #4872f6;
background-color:#ffffffe9;
}
.jishuyoushi{
width: 100%;
height: 748px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-width: 1400px;
padding: 100px 0;
background-size: cover !important;
background-position: center center !important;
}

.jishuyoushi .title {
text-align: center;
font-size: 2.5rem;
margin: 3rem 0;
font-weight: bold;
}

.advantages {
display: flex;
justify-content: center;
gap: 20px;
width: 1400px;
margin: 0 auto;
}

.advantage-card {
flex: 1;
position: relative;
height: 400px;
border-radius: 10px;
overflow: hidden;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
cursor: pointer;
transition: transform 0.3s ease;
}

.advantage-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
z-index: 1;
}

.advantage-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(32, 148, 243, 0.4),
transparent
);
transition: 0.5s;
z-index: 1;
}

.advantage-card:hover::after {
left: 100%;
}

.advantage-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.advantage-card > * {
position: relative;
z-index: 2;
}

.advantage-card h2 {
font-size: 2rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.advantage-card p {
font-size: 1rem;
line-height: 1.5;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

stability {

background: linear-gradient(rgba(23, 86, 221, 0.7), rgba(23, 86, 221, 0.7)),
            url('img/jishu1.webp') center/cover;

}

concurrency {

background: linear-gradient(rgba(51, 51, 51, 0.7), rgba(51, 51, 51, 0.7)),
            url('img/jishu2.webp') center/cover;

}

smooth {

background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(102, 102, 102, 0.7)),
            url('img/jishu3.webp') center/cover;

}

@media (max-width: 768px) {
.advantages {
flex-direction: column;
}

.advantage-card {
    height: 300px;
}

}
.yunying {
height: 834px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.yunying .content{
width: 1440px;
height: 100%;
padding: 104px 0;
}
.yunying .content .title{
color: #191919;
text-align: center;
font-family: PingFang SC;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 1px;
margin-bottom: 16px;
}
.yunying .list{
height: 100%;
padding: 0;
width: 1900px;
display: flex;
flex-direction: row;
}
.yunying .list .li-item{
margin-right: 20px;
}
.yunying .list img{
width: 378px;
height: 200px;
border-radius: 8px;
}
.yunying .list .text-box{
flex: 1;
width: 100%;
padding:23px 33px 23px 0;
background: rgba(255, 255, 255, 0);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.yunying .list .t-title{
color: #333;
font-family: PingFang SC;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 27px;
margin-bottom: 13px;
left: 0;
}
.yunying .list .box-item{
align-self: stretch;
overflow: hidden;
color: #666;
text-overflow: ellipsis;
font-family: PingFang SC;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 15px;
}
.yunying .content .control{
margin-top: 38px;
display: flex;
align-items: center;
}
.yunying .content .control-item{
width: 35px;
height: 35px;
background: #f0f0f0;
border-radius: 50%;
margin-right: 17px;
cursor: pointer;
border: 0.6px solid #fff;
background: linear-gradient(180deg, rgba(255, 255, 255, .6), #fff);
box-shadow: 0 2.5px 20px rgba(0, 41, 102, .06);
backdrop-filter: blur(18px);
display: flex;
justify-content: center;
align-items: center;
transition: all .5s ease;
}
.yunying .content .control-item img{
width: 15px;
height: 15px;
}
.partner {
height: 1255px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 104px 0;
background-size: cover !important;
background-position: center center !important;
}
.partner .title{
color: #191919;
text-align: center;
font-family: PingFang SC;
font-size: 48px;
font-weight: 600;
}
.partner .zs{
color: #666;
margin-top: 16px;
font-family: PingFang SC;
font-size: 20px;
font-weight: 400;
line-height: 28px;
text-align: center;
}
.partner-item{
height: 372px;
width: 100%;
}
.partner .partner-box{
width: 1440px;
height:420px;
margin-top: 22.5px;
display: flex;
flex-direction: row;
margin-left: auto;
margin-right: auto;
position: relative;
list-style: none;
padding: 0;
z-index: 1;
}
.partner-box .box{
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.partner-box .box-1{
width: 460px;
margin-right: 30px;
background-color: #fff;
border-radius: 5px;
}
.partner-box .box-1 img{
height: 258px;
width: 100%;
border-radius: 8px 8px 0 0;
}
.partner-box .box-item{
height: 162px;
padding: 13px 26px;
box-shadow: 0 3px 39px rgba(0, 83, 208, .08);
position: relative;
}
.partner-box .box-title{
color: #333;
font-size: 22px;
font-weight: 600;
}
.partner-box .box-content{
align-self: stretch;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
margin-top: 10px;
font-size: 17px;
font-weight: 400;
text-align: left;
}
.partner-list{
width: 100%;
margin: 140px 0 60px;
}
.partner-list .partner-list-box{
width: 1440px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.partner-list .partner-list-item{
position: relative;
width: 219px;
height: 149px;
margin-right: 24px;
}
.partner-list-item img{
width: 100%;
height: 100%;
}

.partner-list-item-5{
position: relative;
width: 219px;
height: 149px;
}
.partner-list-item-5 img{
width: 100%;
height: 100%;
}
.partner-list-item-10 img{
width: 100%;
height: 100%;
}
.partner-list-item-11 img{
width: 100%;
height: 100%;
}
.partner-list-item-10{
margin-top: 15px;
position: relative;
width: 219px;
height: 149px;
margin-right: 24px;
}
.partner-list-item-11{
position: relative;
width: 219px;
height: 149px;
margin-top: 24px;
}
button{
background-color: #4a90e2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
button:hover{
background-color: #357abd;
color: #fff;
}
.under {
height: 299px;
width: 100%;
background-size: cover;
}
.under-content{
min-width: 1440px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px 0;
}
.under-content .title{
color: #fff;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 56px;
margin-bottom: 24px;
letter-spacing: 1px;
text-align: center;
}
.under-content .info{
display: flex;
justify-content: center;
align-items: center;
}
.info-img{
margin-right: 25px;
padding: 5px;
border-radius: 2.5px;
background: #fff;
}
.info-img img{
height: 75px;
width: 75px;
object-fit: cover;
}
.info .text-box .text{
color: #fff;
text-align: center;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 15px;
letter-spacing: 0.6px;
margin-bottom: 5px;
}
.text-box .text-b{
color: #fff;
font-family: PingFang SC;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 15px;
letter-spacing: 0.6px;
margin-bottom: 17px;
}
.text-box .button{
display: flex;
width: 100px;
height: 30px;
justify-content: center;
align-items: center;
border-radius: 2.5px;
background: #fff;
color: #1472ff;
font-size: 10px;
font-style: normal;
font-weight: 500;
letter-spacing:0.6px;
cursor: pointer;
}
.footer {
height: 763px;
width: 100%;
position: relative;
background: #161e30;
z-index: 4;
}
.footer-content{
max-width: 1440px;
margin: 0 auto;
padding-bottom: 64px;
box-sizing: border-box;
}
.footer-title{
padding-bottom: 46px;
display: flex;
justify-content: space-between;
padding-top: 64px;
}
.footer-column{
text-align: left;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Segoe UI, Helvetica Neue, PingFang SC, Noto Sans, Noto Sans CJK SC, Microsoft YaHei, 微軟雅黑, sans-serif;
text-rendering: optimizelegibility;
}
.footer-column h3{
color: #fff;
font-size: 16px;
margin-bottom: 24px;
line-height: 24px;
height: 24px;
}
.footer-column li{
line-height: 22px;
height: 22px;
margin: 0 0 16px;
font-size: 14px;
color:hsla(0, 0%, 100%, 0.557);
}
.footer-contact{
text-align: left;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Segoe UI, Helvetica Neue, PingFang SC, Noto Sans, Noto Sans CJK SC, Microsoft YaHei, 微軟雅黑, sans-serif;
text-rendering: optimizelegibility;
}
.footer-contact .title{
font-size: 30px;
color: #fff;
margin-bottom: 11px;
height: 30px;
font-weight: 500;

line-height: 30px;

}
.footer-contact p{
font-size: 12px;
color:hsla(0, 0%, 100%, 0.557);
opacity: .6;
margin-bottom: 42px;
}
.footer-contact .qr{
display: flex;
text-align: center;
font-size: 0;
}
.gzh{
margin-right: 39px;
}
.cysq img{
width: 110px;
height: 110px;
}
.bottom .content{
line-height: 29px;
margin-right: 32px;
}
.bottom{
display: flex;
flex-direction: row;
color: hsla(0, 0%, 100%, 0.557);
}
.friend{
display: -webkit-flex;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 24px;
margin-bottom: 19px;
line-height: 20px;
padding: 7px 0 8px;
font-size: 12px;
color: rgba(255, 255, 255, .6);
border-top: 1px solid rgba(255, 255, 255, .4);
border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.friend p{
margin-left: 24px;
color: rgba(255, 255, 255, .6);
}
.footer-content .message{
display: flex;
justify-content: space-between;
align-items: center;
}
.message .left .table{
text-overflow: clip;
max-height: 21px;
width: 500px;
margin-bottom: 10px;
overflow: hidden;
color: #f0f0f0;
}
.message .left{
display: flex;
}
.message .left img{
width: 34px;
height: 15px;
margin-top: 3px;
margin-right: 6px;
}
.message p{
font-size: 12px;
color: #fff;
opacity: 0.5;
}
.message .right{
font-size: 12px;
display: flex;
flex-direction: row;
}
.message .right-1{
color: #fff;
display: flex;
align-items: center;
margin: 0 15px;
}
.message .right-1 img {
vertical-align: middle;
margin-right: 5px;
}
.footer-content .message .right p {
font-size: 12px;
color: #fff;
opacity: 0.5;
}
.message .right-2 img {
vertical-align: middle;
margin-right: 5px;
}
.message .right-2{
color: #fff;
display: flex;
align-items: center;
margin: 0 20px;
}
.foot-under-1{
display: flex;
justify-content: space-between;
height: 18px;
min-height: 18px;
line-height: 18px;
font-size: 12px;
color: #fff;
opacity: .3;
}
.foot-under-2{
display: flex;
gap: 10px;
line-height: 18px;
font-size: 12px;
color: #fff;
opacity: .3;
}
.foot-under-2 p:nth-of-type(2){
padding-left: 20px;
box-sizing: border-box;
}
.foot-under-1 .u-content{
display: flex;
align-items: center;
}
.foot-under-1 .u-content p {
display: inline-block;
color: #fff;
margin: 0 10px;
}

....html
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鵝通</title>
<link rel="stylesheet" href="work.css">
<link rel="stylesheet" href="./font_omy7vns2iia/iconfont.css">
</head>
<body>
<div class="bg-header">
<div class="start">
<div class="logo">
<ul>
<li><img src="img/logo.png" alt="" /></li>
<li>首頁(yè)</li>
<li>解決方案</li>
<li>產(chǎn)品服務(wù)</li>
<li>價(jià)格</li>
<li>活動(dòng)</li>
<li>案例</li>
<li>渠道合作</li>
<li>下載與幫助</li>
<li>關(guān)于我們</li>
</ul>
<div class="bt">
<div>我是學(xué)員</div>
<div>商家登錄</div>
<div>免費(fèi)試用</div>
</div>
</div>
</div>
<img src="img/start.crdownload" alt="">
</div>
<div class="chanpin">
<div class="content">
<div class="title">我們的產(chǎn)品能力</div>
<img src="img/chanpin.png" alt="">
<div class="item-list">
<div class="item-box">
<div class="item-start">知識(shí)商鋪</div>
<ul class="item-between">
<li>1分鐘搭建您的知識(shí)商城</li>
<li>助力高效知識(shí)變現(xiàn)</li>
</ul>
<div class="item-end">免費(fèi)試用</div>
</div>
<div class="item-box">
<div class="item-start">私域直播</div>
<ul class="item-between">
<li>企業(yè)級(jí)專屬私域直播平臺(tái)</li>
<li>實(shí)現(xiàn)私域流量高效運(yùn)營(yíng)</li>
</ul>
<div class="item-end">免費(fèi)試用</div>
</div>

            <div class="item-box">
                <div class="item-start">企微SCRM</div>
                <ul class="item-between">
                    <li>企業(yè)微信私域運(yùn)營(yíng)神器</li>
                    <li>數(shù)據(jù)洞察驅(qū)動(dòng)業(yè)績(jī)?cè)鲩L(zhǎng)</li>
                </ul>
                <div class="item-end">免費(fèi)試用</div>
            </div>
        </div>
    </div>
</div>
<div class="changjing">
    <div class="content">
        <div class="title">我們的場(chǎng)景解決方案</div>
        <ul class="nav">
            <li class="active">公域獲客</li>
            <li>私域運(yùn)營(yíng)</li>
            <li>直播帶貨</li>
            <li>內(nèi)容交付</li>
            <li>數(shù)據(jù)化運(yùn)營(yíng)</li>
        </ul>
        <div class="intro">
            <!-- 左側(cè)圖片 -->
            <div class="left">
                <img src="img/changjing.webp" alt="">
            </div>
            <!-- 右側(cè)內(nèi)容 -->
            <div class="right">
                <h3>公域獲客</h3>
                <h4>
                    多渠道獲客，沉淀私域流量池
                </h4>
                <p>
                    打通抖音/快手/小紅書/視頻號(hào)/公眾號(hào)，支持直播間/短視頻/賬號(hào)主頁(yè)等多種課程掛載方式，快速
                    開(kāi)啟知識(shí)變現(xiàn)
                </p>
                <p>
                    多種公域轉(zhuǎn)私域工具，支持添加企微/引流加群加人/渠道活碼/分配引擎等工具，客戶可批量導(dǎo)流到
                    私域流量池
                </p>
                <p>
                    豐富的廣告獲客能力，落地頁(yè)支持表單/支付類/0元領(lǐng)取/添加企微等多場(chǎng)景,提升廣告ROI
                </p>
                <div class="btns">
                    <div>免費(fèi)試用</div>

                    <div>了解詳情</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="hangye" style="background: url(img/hangyeanlie.webp);">
    <div class="title">我們的行業(yè)解決方案</div>
    <div class="content">
        <div class="left">
            <div class="left-1"><img src="img/1.webp" alt="">
                <span style="margin-left: 8px;">新零售門店</span>
            </div>
            <div class="left-2"> <img src="img/2.webp" alt=""><span style="margin-left: 8px;">職業(yè)培訓(xùn)</span></div>
            <div class="left-3"> <img src="img/3.webp" alt=""><span style="margin-left: 8px;">知識(shí)付費(fèi)</span></div>
            <div class="left-4"> <img src="img/4.webp" alt=""><span style="margin-left: 8px;">美業(yè)直播</span></div>
        </div>
        <div class="between">
            <div class="between-content">
                <div class="bc-title">新零售門店解決方案</div>
                <div class="bc-title2">私域直播帶貨+ 推廣門店體系，助力商家私域流量高效變現(xiàn)</div>
                <div class="bc-list">
                    <div class="list-item">
                        <i class="iconfont icon-zhibodaihuo"></i>
                        <div class="list-item-text">直播帶貨</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-zaixianshangcheng"></i>
                        <div class="list-item-text">在線商城</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-mendianguanli"></i>
                        <div class="list-item-text">門店管理</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-iconshoukuanma"></i>
                        <div class="list-item-text">門店核銷</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-qudaoma"></i>
                        <div class="list-item-text">渠道活碼</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-hongbao"></i>
                        <div class="list-item-text">直播紅包</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-huodongguanli"></i>
                        <div class="list-item-text">直播抽獎(jiǎng)</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-daihuodarenbang"></i>
                        <div class="list-item-text">邀請(qǐng)達(dá)人榜</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-miaosha"></i>
                        <div class="list-item-text">商品秒殺</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right-title">行業(yè)案列</div>
        </div>
        <div class="content-btn">
            <div class="button">
                <div>免費(fèi)試用</div>
                <div>了解詳情</div>
            </div>
        </div>
    </div>
</div>
<div class="jishuyoushi" style="background: var(--02-bg-xe-bg-color-page-f-5-f-7-fa, #F5F7FA);">
    <h1 class="title">我們的技術(shù)優(yōu)勢(shì)</h1>
    <div class="advantages">
        <div class="advantage-card" id="stability">
            <h2>超穩(wěn)定</h2>
            <p>多云負(fù)載均衡/全球CDN加速</p>
        </div>
        <div class="advantage-card" id="concurrency">
            <h2>高并發(fā)</h2>
            <p>支持多用戶同時(shí)在線</p>
        </div>
        <div class="advantage-card" id="smooth">
            <h2>超流暢</h2>
            <p>觀看端自動(dòng)探測(cè)并自動(dòng)跨云線路切換</p>
        </div>
    </div>
</div>
<div class="yunying" style="background: url(img/白板.jpg);">
    <div class="content">
        <div class="title">我們的運(yùn)營(yíng)服務(wù)</div>
        <div class="item">
            <ul class="list">
                <li class="li-item"><img src="img/服務(wù).png" alt="">
                    <div class="text-box">
                      <div class="t-title">社區(qū)服務(wù)</div>
                        <div class="box-item"> 標(biāo)桿商家分享，同行商家交流，總比別人快一步</div>
                    </div>
                </li>
                <li class="li-item">
                <img src="img/yunying2.png" alt="">
                    <div class="text-box">
                        <div class="t-title">管家服務(wù)</div>
                          <div class="box-item"> 客戶經(jīng)理、服務(wù)管家、多角色在群，服務(wù)全面包圍</div>
                </li>
                <li class="li-item">
                    <img src="img/yunying3.png" alt="">
                    <div class="text-box">
                        <div class="t-title">大客服務(wù)</div>
                          <div class="box-item"> 設(shè)置夜班服務(wù)管家/假期值班管家,24小時(shí)在線服務(wù),服務(wù)從不掉線</div>
                </li>
                <li class="li-item">
                    <img src="img/yunying4.png" alt="">
                    <div class="text-box">
                        <div class="t-title">運(yùn)維服務(wù)</div>
                          <div class="box-item"> 需求24小時(shí)反饋,需求處理率大于90% ,產(chǎn)品經(jīng)理1v1回復(fù)</div>
                </li>
            </ul>
        </div>
        <div class="control">
            <div class="control-item"><img src="img/yunyingfu1.png" alt=""></div>
            <div class="control-item"><img src="img/yunyingfu2.png" alt=""></div>
        </div>
    </div>
</div>
<div class="partner" style="background: url(img/parter.png);">
    
        <div class="title">他們都在用小鵝通</div>
        <div class="zs">（*排名不分先后順序）</div>
        <div class="partner-item">
        <div class="partner-box">
            <div class="box">
                <div class="box-1">
                    <img src="img/partner1.webp" alt="">
                    <div class="box-item">
                        <div class="box-title">小熊熊科學(xué)學(xué)習(xí)</div>
                        <div class="box-content">小能熊學(xué)院以學(xué)習(xí)科學(xué)化為使命，專注提供學(xué)習(xí)方法和自我管理解決方案，陪伴嚴(yán)肅、耐心、永不妥協(xié)的終生學(xué)習(xí)者！</div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-1">
                    <img src="img/partner2.webp" alt="">
                    <div class="box-item">
                        <div class="box-title">劉潤(rùn)·進(jìn)化的力量</div>
                        <div class="box-content">劉潤(rùn)，潤(rùn)米咨詢創(chuàng)始人，“5分鐘商學(xué)院”課程主理人，著名商業(yè)顧問(wèn)，曾為海爾、中遠(yuǎn)、恒基、百度等企業(yè)提供過(guò)戰(zhàn)略咨詢服務(wù)，每年10月舉辦“進(jìn)化的力量·年度演講”，為創(chuàng)業(yè)者企業(yè)家提供年度規(guī)劃的參考方向，一起更早看到未來(lái)。使命：降低商業(yè)的認(rèn)知門檻。</div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-1">
                    <img src="img/partner3.webp" alt="">
                    <div class="box-item">
                        <div class="box-title">佰君易直播間</div>
                        <div class="box-content">佰君易直播間，由培養(yǎng)過(guò)10萬(wàn)項(xiàng)目管理師的王遠(yuǎn)航老師打造，為各行業(yè)提供項(xiàng)目管理實(shí)戰(zhàn)培訓(xùn)。佰君易直播間與小鵝通深度合作，幫助職場(chǎng)小伙伴升職加薪</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="partner-list">
            <ul class="partner-list-box">
                <li class="partner-list-item">
                    <img src="img/商家logo1.png" alt="">
                </li>
                <li class="partner-list-item">
                    <img src="img/商家logo1-1.png" alt="">
                </li>
                <li class="partner-list-item">
                    <img src="img/商家logo1-2.png" alt="">
                </li>
                <li class="partner-list-item">
                    <img src="img/商家logo1-3.png" alt="">
                </li>
                <li class="partner-list-item">
                    <img src="img/商家logo1-4.png" alt="">
                </li>
                <li class="partner-list-item-5">
                    <img  src="img/商家logo1-5.png" alt="">
                </li>
                <li class="partner-list-item-10">
                    <img src="img/商家logo1-6.png" alt="">
                </li>
                <li class="partner-list-item-10">
                    <img src="img/商家logo1-7.png" alt="">
                </li>
                <li class="partner-list-item-10">
                    <img src="img/商家logo1-8.png" alt="">
                </li>
                <li class="partner-list-item-10">
                    <img src="img/商家logo1-9.png" alt="">
                </li>
                <li class="partner-list-item-10">
                    <img src="img/商家logo1-10.png" alt="">
                </li>
                <li class="partner-list-item-11">
                    <img src="img/商家logo1-11.png" alt="">
                </li>
            </ul>
        </div>
            <button>查看更多案例</button>
</div>
<div class="under" style="background: url(img/PC端-掃碼\ 2\ \(1\).png);">
    <div class="under-content">
        <div class="title">立即掃碼咨詢，領(lǐng)取您的專屬解決方案</div>
        <div class="info">
            <div class="info-img"><img src="img/erwei.webp" alt=""></div>
            <div class="text-box">
                <div class="text">掃碼添加客戶經(jīng)理</div>
                <div class="text-b">或者您也可以先</div>
                <div class="button">免費(fèi)試用</div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-content">
        <div class="footer-title">
    <div class="footer-column">
        <h3>場(chǎng)景</h3>
        <ul>
            <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>
    </div>
    <div class="footer-column">
        <h3>行業(yè)</h3>
        <ul>
            <li>零售電商</li>
            <li>職業(yè)培訓(xùn)</li>
            <li>知識(shí)付費(fèi)</li>
            <li>企業(yè)培訓(xùn)</li>
            <li>美業(yè)直播</li>
            <li>企業(yè)培訓(xùn)</li>
            <li>社團(tuán)團(tuán)購(gòu)</li>
            <li>營(yíng)銷會(huì)務(wù)</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>產(chǎn)品</h3>
        <ul>
            <li>知識(shí)店鋪</li>
            <li>私域直播</li>
            <li>企微SCRM</li>
            <li>企學(xué)院</li>
            <li>智能投放</li>
            <li>海外eLink</li>
            <li>小鵝云</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>服務(wù)</h3>
        <ul>
            <li>小鵝創(chuàng)社區(qū)</li>
            <li>本地社群</li>
            <li>小鵝通課堂</li>
            <li>小鵝通直播</li>
            <li>對(duì)話解析</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>關(guān)于我們</h3>
        <ul>
            <li>公司簡(jiǎn)介</li>
            <li>加入我們</li>
            <li>媒體報(bào)道</li>
            <li>更多資訊</li>
            <li>客戶案例</li>
            <li>幫助中心</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>媒體報(bào)道</h3>
        <ul>
            <li> D輪融資1.2億美元，小鵝通究竟在做什么？ </li>
            <li> 知識(shí)付費(fèi)用戶達(dá)5.27億，內(nèi)容創(chuàng)業(yè)的下半場(chǎng)風(fēng)口在“服務(wù)” </li>
            <li> 知識(shí)工作者的終極夢(mèng)想，可能是擁有一個(gè)“第二大腦” </li>
            <li> 小鵝通：讓知識(shí)更有價(jià)值 </li>
            <li> 小鵝通聯(lián)合艾瑞咨詢發(fā)布《2023年中國(guó)私域運(yùn)營(yíng)洞察白皮書》 </li>
        </ul>
    </div>
    <div class="footer-contact">
        <div class="title">400-102-6665</div>
        <p>周一至周日 9:00-21:00</p>
        <div class="qr">
            <div class="gzh">
                <img src="img/erweima1.png" alt="">
                <p>關(guān)注小鵝通公眾號(hào)</p>
            </div>
            <div class="cysq">
                <img src="img/小鵝創(chuàng)業(yè)社區(qū)-公眾號(hào)二維碼.jpg" alt="">
                <p>進(jìn)入小鵝創(chuàng)業(yè)社區(qū)</p>
            </div>
        </div>
    </div>
</div>
<div class="bottom">
    <ul class="content">
        <li> 深圳總部：深圳市南山區(qū)粵海街道科興科學(xué)園D3棟7樓 </li>
        <li> 北京地址：北京市朝陽(yáng)區(qū)朝外大街乙6號(hào)23層2301B-2307 </li>
        <li> 上海地址：中國(guó)（上海）自由貿(mào)易試驗(yàn)區(qū)世紀(jì)大道1500號(hào)1601-A室 </li>
    </ul>
    <ul class="content">
        <li> 商務(wù)合作：support@xiaoe-tech.com </li>
        <li> 渠道合作：partner@xiaoe-tech.com </li>
        <li> 投訴意見(jiàn)：xiaoeks@xiaoe-tech.com </li>
    </ul>
    <ul class="content">
        <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="friend">
    <span>友情鏈接</span>
    <p>知識(shí)付費(fèi)平臺(tái)</p>
    <p>知識(shí)付費(fèi)軟件</p>
    <p>小鵝通企學(xué)院</p>
    <p>私域直播工具</p>
    <p>小鵝通APP</p>
    <p>小鵝創(chuàng)業(yè)社區(qū)</p>
    <p>小鵝通移動(dòng)版</p>
    <p>小鵝通學(xué)員版</p>
</div>
<div class="message">
    <div class="left">
        <img src="img/foot1.png" alt="">
        <div class="table">關(guān)于印發(fā)《粵港澳大灣區(qū)內(nèi)地指定醫(yī)療機(jī)構(gòu)非首次使用臨床急需進(jìn)口港澳藥品醫(yī)療器械申報(bào)指南》的通知</div>
    </div>
    <p> 工商營(yíng)業(yè)執(zhí)照 </p>
    <div class="right">
        <div class="right-1">
            <img src="img/foot2.png" alt="">
            <p>粵公網(wǎng)安備 44030502002037號(hào)</p>
        </div>
        <div class="right-2">
            <img src="img/foot3.png" alt="">
            <p>工商網(wǎng)監(jiān) 電子標(biāo)識(shí)</p>
        </div>
    </div>
</div>
<div class="foot-under-1">
    <div class="u-content">
        <div class="t"> Copyright ? 2015-2024 深圳小鵝網(wǎng)絡(luò)技術(shù)有限公司 All Rights Reserved. </div>
        <p>粵ICP備15020529號(hào)-1</p>
    </div>
</div>
<div class="foot-under-2">
    <p> 互聯(lián)網(wǎng)藥品信息服務(wù)資格證書（粵）—經(jīng)營(yíng)性—2020—0589 </p>
    <p> 醫(yī)療器械網(wǎng)絡(luò)交易服務(wù)第三方平臺(tái)備案（粵）網(wǎng)械平臺(tái)備字（2021）第00001號(hào) </p>
</div>
</div>

</div>
</body>

</html>