|
|
@@ -8,287 +8,231 @@ const router = useRouter();
|
|
|
const handleDetail = () => {
|
|
|
router.push("/detail");
|
|
|
};
|
|
|
-// onMounted(() => {
|
|
|
-// localStorage.removeItem("chatHistory");
|
|
|
-// localStorage.removeItem("status");
|
|
|
-// });
|
|
|
</script>
|
|
|
<template>
|
|
|
- <div class="home">
|
|
|
- <div class="logo">
|
|
|
- <img src="../assets/logqian.png" alt="">
|
|
|
- <div class="logo_title">
|
|
|
- <span>科驱数智创新室AI中台</span>
|
|
|
- <!-- <span>IntelligentTrain</span> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="banner">
|
|
|
- <p>智能陪练 <span>▪</span></p>
|
|
|
- <span>高效提升</span>
|
|
|
+ <div class="home">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="../assets/logqian.png" alt="">
|
|
|
+ <div class="logo_title">
|
|
|
+ <span>科驱数智创新室AI中台</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="banner">
|
|
|
+ <div class="product">
|
|
|
+ <p>智能陪练 <span class="separator">▪</span></p>
|
|
|
+ <span>高效提升</span>
|
|
|
</div>
|
|
|
<div class="btn">
|
|
|
- <div>定制对话</div>
|
|
|
- <div>拟真复盘</div>
|
|
|
+ <div>定制对话</div>
|
|
|
+ <div>拟真复盘</div>
|
|
|
</div>
|
|
|
- <div class="produce">
|
|
|
- <div class="content bg">
|
|
|
- <p>1.定制专属训练场景</p>
|
|
|
- <img src="../assets/dingzhi.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="content tg">
|
|
|
- <p>2.自由设定客户角色</p>
|
|
|
- <div class="scence"></div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="card_list">
|
|
|
+ <div class="card_item bg">
|
|
|
+ <p>1.定制专属训练场景</p>
|
|
|
+ <img src="../assets/dingzhi.png" alt="">
|
|
|
</div>
|
|
|
- <div class="produce1">
|
|
|
- <div class="voice">
|
|
|
- <p>3.拟真语音深度对话</p>
|
|
|
- </div>
|
|
|
- <div class="advice">
|
|
|
- <HeimaPage></HeimaPage>
|
|
|
- </div>
|
|
|
+ <div class="card_item tg">
|
|
|
+ <p>2.自由设定客户角色</p>
|
|
|
+ <div class="scence"></div>
|
|
|
</div>
|
|
|
- <div class="bottom">
|
|
|
- <van-button type="warning" size="small" @click="handleDetail" class="w">立即体验</van-button>
|
|
|
+ <div class="card_item voice">
|
|
|
+ <p>3.拟真语音深度对话</p>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div class="card_item advice bg">
|
|
|
+ <HeimaPage></HeimaPage>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <van-button type="warning" size="small" @click="handleDetail" class="w">立即体验</van-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
p {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
html {
|
|
|
- touch-action: manipulation;
|
|
|
+ touch-action: manipulation;
|
|
|
|
|
|
}
|
|
|
|
|
|
.home {
|
|
|
- min-width: 100vw;
|
|
|
- min-height: 100vh;
|
|
|
- background-image: url(../assets/bg.jpg);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
+ min-width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-image: url(../assets/bg.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ padding: 1.3rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- img {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- margin-right: 3px;
|
|
|
+ img {
|
|
|
+ width: 1.7rem;
|
|
|
+ height: 1.7rem;
|
|
|
+ margin-right: 3px;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .logo_title {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .logo_title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
|
- // font-family: cursive;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 1rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ // font-family: cursive;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- span:nth-child(2) {
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 400;
|
|
|
- margin-top: -5px;
|
|
|
- // margin-left: 10px;
|
|
|
- }
|
|
|
+.main {
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
.banner {
|
|
|
- color: #fff;
|
|
|
- font-size: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 1.3rem 0 0.65rem 1.3rem;
|
|
|
+
|
|
|
+ .product {
|
|
|
font-weight: 700;
|
|
|
- margin: 20px 0 10px 20px;
|
|
|
-}
|
|
|
+ color: #fff;
|
|
|
+ font-size: 2.5rem;
|
|
|
|
|
|
-.btn {
|
|
|
+ .separator {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
display: flex;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
- margin: 20px 0 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 1rem;
|
|
|
|
|
|
div {
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.7);
|
|
|
- border-radius: 5px;
|
|
|
- padding: 3px 5px;
|
|
|
- font-size: 10px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.7);
|
|
|
+ border-radius: 0.33rem;
|
|
|
+ padding: 0.25rem 0.33rem;
|
|
|
+ font-size: 0.65rem;
|
|
|
}
|
|
|
|
|
|
div:nth-child(1) {
|
|
|
- margin-right: 10px;
|
|
|
+ margin-right: 0.65rem;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-.produce {
|
|
|
- margin: 25px 20px 10px 20px;
|
|
|
- // margin-bottom: 10px;
|
|
|
- // padding-bottom: 10px;
|
|
|
+.card_list {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 1.3rem 1.3rem 0 1.3rem;
|
|
|
+
|
|
|
+ .card_item {
|
|
|
+ width: 48%;
|
|
|
+ // flex: 1 1 calc(50% - 2vw);
|
|
|
+ /* 始终两列 */
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0.5rem 0 0;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .bg {
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 8px;
|
|
|
- p{
|
|
|
- color: #000;
|
|
|
- }
|
|
|
+ p {
|
|
|
+ font-size: 0.88rem;
|
|
|
+ // text-align: center;
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 43%;
|
|
|
-
|
|
|
- p {
|
|
|
- padding-top: 15px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- // width: 100%;
|
|
|
- height: 150px;
|
|
|
- margin: 0 auto;
|
|
|
- // height: 100%;
|
|
|
- // margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .scence {
|
|
|
- // width: 53%;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- // min-height: 100px;
|
|
|
- background-image: url(../assets/role_scene.png);
|
|
|
- // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ // width: 100%;
|
|
|
+ height: 9.5rem;
|
|
|
+ object-fit: cover;
|
|
|
+ max-height: auto;
|
|
|
+ max-width: 100%;
|
|
|
+ // height: auto;
|
|
|
}
|
|
|
|
|
|
- .tg {
|
|
|
- width: 53%;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
|
- border-radius: 8px;
|
|
|
- color: #fff;
|
|
|
+ .scence {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-image: url(../assets/role_scene.png);
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- // .bg {
|
|
|
- // width: 43%;
|
|
|
- // background-color: #ffffff;
|
|
|
- // /* 白色背景 */
|
|
|
- // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
- // /* 添加阴影效果 */
|
|
|
- // border-radius: 8px;
|
|
|
- // min-height: 100px;
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- // justify-content: center;
|
|
|
- // align-items: center;
|
|
|
-
|
|
|
- // p {
|
|
|
- // padding-top: 15px;
|
|
|
- // // text-align: center;
|
|
|
- // font-size: 14px;
|
|
|
- // }
|
|
|
-
|
|
|
- // img {
|
|
|
- // // width: 100%;
|
|
|
- // height: 150px;
|
|
|
- // margin: 0 auto;
|
|
|
- // // height: 100%;
|
|
|
- // // margin-top: 20px;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // .sence {
|
|
|
- // width: 53%;
|
|
|
- // // background-color: #fff;
|
|
|
- // min-height: 100px;
|
|
|
- // background-image: url(../assets/role_scene.png);
|
|
|
- // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
- // background-repeat: no-repeat;
|
|
|
- // background-size: cover;
|
|
|
- // background-position: center;
|
|
|
- // border-radius: 8px;
|
|
|
- // padding-top: 15px;
|
|
|
- // font-size: 14px;
|
|
|
- // text-align: center;
|
|
|
-
|
|
|
- // p {
|
|
|
- // color: #fff;
|
|
|
- // }
|
|
|
- // // img {
|
|
|
- // // // width: 100%;
|
|
|
- // // height: 150px;
|
|
|
- // // margin: 0 auto;
|
|
|
- // // // height: 100%;
|
|
|
- // // // margin-top: 20px;
|
|
|
- // // }
|
|
|
- // }
|
|
|
-}
|
|
|
+ .bg {
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
|
|
|
-.produce1 {
|
|
|
- padding: 0 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .advice {
|
|
|
- width: 53%;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 8px;
|
|
|
- // margin-left: 10px;
|
|
|
- }
|
|
|
+ .tg {
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .voice {
|
|
|
- width: 43%;
|
|
|
- height: 130px;
|
|
|
- background-image: url(../assets/sence.png);
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- border-radius: 8px;
|
|
|
- padding-top: 15px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
+ .voice {
|
|
|
+ height: 11rem;
|
|
|
+ background-image: url(../assets/sence.png);
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding-top: 0.5rem;
|
|
|
+ font-size: 0.88rem;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- p {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ p {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .w{
|
|
|
- width: 83px;
|
|
|
- }
|
|
|
+ flex: 0 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 3vw;
|
|
|
+
|
|
|
+ .w {
|
|
|
+ width: 30vw;
|
|
|
+ font-size: 3vw;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
- html {
|
|
|
- touch-action: pan-y;
|
|
|
- /* 允许垂直滚动，禁止水平滚动和缩放 */
|
|
|
- }
|
|
|
+ html {
|
|
|
+ touch-action: pan-y;
|
|
|
+ /* 允许垂直滚动，禁止水平滚动和缩放 */
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
