小鹅通首页

代码实现

....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>首页</li>
<li>解决方案</li>
<li>产品服务</li>
<li>价格</li>
<li>活动</li>
<li>案例</li>
<li>渠道合作</li>
<li>下载与帮助</li>
<li>关于我们</li>
</ul>
<div class="bt">
<div>我是学员</div>
<div>商家登录</div>
<div>免费试用</div>
</div>
</div>
</div>
<img src="img/start.crdownload" alt="">
</div>
<div class="chanpin">
<div class="content">
<div class="title">我们的产品能力</div>
<img src="img/chanpin.png" alt="">
<div class="item-list">
<div class="item-box">
<div class="item-start">知识商铺</div>
<ul class="item-between">
<li>1分钟搭建您的知识商城</li>
<li>助力高效知识变现</li>
</ul>
<div class="item-end">免费试用</div>
</div>
<div class="item-box">
<div class="item-start">私域直播</div>
<ul class="item-between">
<li>企业级专属私域直播平台</li>
<li>实现私域流量高效运营</li>
</ul>
<div class="item-end">免费试用</div>
</div>

            <div class="item-box">
                <div class="item-start">企微SCRM</div>
                <ul class="item-between">
                    <li>企业微信私域运营神器</li>
                    <li>数据洞察驱动业绩增长</li>
                </ul>
                <div class="item-end">免费试用</div>
            </div>
        </div>
    </div>
</div>
<div class="changjing">
    <div class="content">
        <div class="title">我们的场景解决方案</div>
        <ul class="nav">
            <li class="active">公域获客</li>
            <li>私域运营</li>
            <li>直播带货</li>
            <li>内容交付</li>
            <li>数据化运营</li>
        </ul>
        <div class="intro">
            <!-- 左侧图片 -->
            <div class="left">
                <img src="img/changjing.webp" alt="">
            </div>
            <!-- 右侧内容 -->
            <div class="right">
                <h3>公域获客</h3>
                <h4>
                    多渠道获客，沉淀私域流量池
                </h4>
                <p>
                    打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速
                    开启知识变现
                </p>
                <p>
                    多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到
                    私域流量池
                </p>
                <p>
                    丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景,提升广告ROI
                </p>
                <div class="btns">
                    <div>免费试用</div>

                    <div>了解详情</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="hangye" style="background: url(img/hangyeanlie.webp);">
    <div class="title">我们的行业解决方案</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;">职业培训</span></div>
            <div class="left-3"> <img src="img/3.webp" alt=""><span style="margin-left: 8px;">知识付费</span></div>
            <div class="left-4"> <img src="img/4.webp" alt=""><span style="margin-left: 8px;">美业直播</span></div>
        </div>
        <div class="between">
            <div class="between-content">
                <div class="bc-title">新零售门店解决方案</div>
                <div class="bc-title2">私域直播带货+ 推广门店体系，助力商家私域流量高效变现</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">直播抽奖</div>
                    </div>
                    <div class="list-item">
                        <i class="iconfont icon-daihuodarenbang"></i>
                        <div class="list-item-text">邀请达人榜</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">行业案列</div>
        </div>
        <div class="content-btn">
            <div class="button">
                <div>免费试用</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">我们的技术优势</h1>
    <div class="advantages">
        <div class="advantage-card" id="stability">
            <h2>超稳定</h2>
            <p>多云负载均衡/全球CDN加速</p>
        </div>
        <div class="advantage-card" id="concurrency">
            <h2>高并发</h2>
            <p>支持多用户同时在线</p>
        </div>
        <div class="advantage-card" id="smooth">
            <h2>超流畅</h2>
            <p>观看端自动探测并自动跨云线路切换</p>
        </div>
    </div>
</div>
<div class="yunying" style="background: url(img/白板.jpg);">
    <div class="content">
        <div class="title">我们的运营服务</div>
        <div class="item">
            <ul class="list">
                <li class="li-item"><img src="img/服务.png" alt="">
                    <div class="text-box">
                      <div class="t-title">社区服务</div>
                        <div class="box-item"> 标杆商家分享，同行商家交流，总比别人快一步</div>
                    </div>
                </li>
                <li class="li-item">
                <img src="img/yunying2.png" alt="">
                    <div class="text-box">
                        <div class="t-title">管家服务</div>
                          <div class="box-item"> 客户经理、服务管家、多角色在群，服务全面包围</div>
                </li>
                <li class="li-item">
                    <img src="img/yunying3.png" alt="">
                    <div class="text-box">
                        <div class="t-title">大客服务</div>
                          <div class="box-item"> 设置夜班服务管家/假期值班管家,24小时在线服务,服务从不掉线</div>
                </li>
                <li class="li-item">
                    <img src="img/yunying4.png" alt="">
                    <div class="text-box">
                        <div class="t-title">运维服务</div>
                          <div class="box-item"> 需求24小时反馈,需求处理率大于90% ,产品经理1v1回复</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">小熊熊科学学习</div>
                        <div class="box-content">小能熊学院以学习科学化为使命，专注提供学习方法和自我管理解决方案，陪伴严肃、耐心、永不妥协的终生学习者！</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">刘润·进化的力量</div>
                        <div class="box-content">刘润，润米咨询创始人，“5分钟商学院”课程主理人，著名商业顾问，曾为海尔、中远、恒基、百度等企业提供过战略咨询服务，每年10月举办“进化的力量·年度演讲”，为创业者企业家提供年度规划的参考方向，一起更早看到未来。使命：降低商业的认知门槛。</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">佰君易直播间，由培养过10万项目管理师的王远航老师打造，为各行业提供项目管理实战培训。佰君易直播间与小鹅通深度合作，帮助职场小伙伴升职加薪</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">立即扫码咨询，领取您的专属解决方案</div>
        <div class="info">
            <div class="info-img"><img src="img/erwei.webp" alt=""></div>
            <div class="text-box">
                <div class="text">扫码添加客户经理</div>
                <div class="text-b">或者您也可以先</div>
                <div class="button">免费试用</div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-content">
        <div class="footer-title">
    <div class="footer-column">
        <h3>场景</h3>
        <ul>
            <li>全域获客</li>
            <li>私域运营</li>
            <li>直播带货</li>
            <li>内容交付</li>
            <li>数据化运营</li>
            <li>企业内训</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>行业</h3>
        <ul>
            <li>零售电商</li>
            <li>职业培训</li>
            <li>知识付费</li>
            <li>企业培训</li>
            <li>美业直播</li>
            <li>企业培训</li>
            <li>社团团购</li>
            <li>营销会务</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>产品</h3>
        <ul>
            <li>知识店铺</li>
            <li>私域直播</li>
            <li>企微SCRM</li>
            <li>企学院</li>
            <li>智能投放</li>
            <li>海外eLink</li>
            <li>小鹅云</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>服务</h3>
        <ul>
            <li>小鹅创社区</li>
            <li>本地社群</li>
            <li>小鹅通课堂</li>
            <li>小鹅通直播</li>
            <li>对话解析</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>关于我们</h3>
        <ul>
            <li>公司简介</li>
            <li>加入我们</li>
            <li>媒体报道</li>
            <li>更多资讯</li>
            <li>客户案例</li>
            <li>帮助中心</li>
        </ul>
    </div>
    <div class="footer-column">
        <h3>媒体报道</h3>
        <ul>
            <li> D轮融资1.2亿美元，小鹅通究竟在做什么？ </li>
            <li> 知识付费用户达5.27亿，内容创业的下半场风口在“服务” </li>
            <li> 知识工作者的终极梦想，可能是拥有一个“第二大脑” </li>
            <li> 小鹅通：让知识更有价值 </li>
            <li> 小鹅通联合艾瑞咨询发布《2023年中国私域运营洞察白皮书》 </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>关注小鹅通公众号</p>
            </div>
            <div class="cysq">
                <img src="img/小鹅创业社区-公众号二维码.jpg" alt="">
                <p>进入小鹅创业社区</p>
            </div>
        </div>
    </div>
</div>
<div class="bottom">
    <ul class="content">
        <li> 深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼 </li>
        <li> 北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307 </li>
        <li> 上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室 </li>
    </ul>
    <ul class="content">
        <li> 商务合作：support@xiaoe-tech.com </li>
        <li> 渠道合作：partner@xiaoe-tech.com </li>
        <li> 投诉意见：xiaoeks@xiaoe-tech.com </li>
    </ul>
    <ul class="content">
        <li> 互联网违法和不良信息举报电话：0755-26409534 </li>
        <li>  互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com  </li>
        <li> 安全漏洞反馈邮箱：security@xiaoe-tech.com </li>
    </ul>
</div>
<div class="friend">
    <span>友情链接</span>
    <p>知识付费平台</p>
    <p>知识付费软件</p>
    <p>小鹅通企学院</p>
    <p>私域直播工具</p>
    <p>小鹅通APP</p>
    <p>小鹅创业社区</p>
    <p>小鹅通移动版</p>
    <p>小鹅通学员版</p>
</div>
<div class="message">
    <div class="left">
        <img src="img/foot1.png" alt="">
        <div class="table">关于印发《粤港澳大湾区内地指定医疗机构非首次使用临床急需进口港澳药品医疗器械申报指南》的通知</div>
    </div>
    <p> 工商营业执照 </p>
    <div class="right">
        <div class="right-1">
            <img src="img/foot2.png" alt="">
            <p>粤公网安备 44030502002037号</p>
        </div>
        <div class="right-2">
            <img src="img/foot3.png" alt="">
            <p>工商网监 电子标识</p>
        </div>
    </div>
</div>
<div class="foot-under-1">
    <div class="u-content">
        <div class="t"> Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved. </div>
        <p>粤ICP备15020529号-1</p>
    </div>
</div>
<div class="foot-under-2">
    <p> 互联网药品信息服务资格证书（粤）—经营性—2020—0589 </p>
    <p> 医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号 </p>
</div>
</div>

</div>
</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容