830 lines
22 KiB
Vue
830 lines
22 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<div class="box-top">
|
||
<div class="headline">
|
||
<h2>不止</h2>
|
||
|
||
<!-- <div id="title-container" >
|
||
<h3 v-for="(title, index) in titles" :key="index" class="title" :style="{transform: `translateY(-${currentTitleIndex * 100}%)`}">{{ title }}</h3>
|
||
</div> -->
|
||
|
||
<div id="title-container" >
|
||
<h3 v-for="(title, index) in titles" :key="index" class="title" :style="titleContainerStyle">{{ title }}</h3>
|
||
</div>
|
||
|
||
<!-- <p>AI软著引擎平台累计辅助编写资料<em v-html="number1"></em>万套，通过平台代办下发证书<em v-html="number2"></em>万件</p> -->
|
||
<p>AI软著引擎平台累计辅助编写资料<em>10</em>万套，通过平台代办下发证书<em>10</em>万件</p>
|
||
<div class="button-box">
|
||
<button><a href="">免费试用</a></button>
|
||
<button><a href="">立即前往</a></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div class="box1">
|
||
<h4>软件著作权的重要性</h4>
|
||
<p>没有被保护的作品随时面临被抄袭，侵权的风险</p>
|
||
<ul>
|
||
<li>
|
||
<img src="/assets/img/box1-1.jpg" alt="logo图片">
|
||
<em style="color: #8281e9;">帮助宣传</em>
|
||
<p>已登记的版权可以向社会宣传自己的产品</p>
|
||
</li>
|
||
<li>
|
||
<img src="/assets/img/box1-2.jpg" alt="logo图片">
|
||
<em style="color: #4193f9;">防止抄袭</em>
|
||
<p>当自己的版权被侵犯时，可以采取法律措施，维护自己的权益</p>
|
||
</li>
|
||
<li>
|
||
<img src="/assets/img/box1-3.jpg" alt="logo图片">
|
||
<em style="color: #ff8217;">提升无形资产</em>
|
||
<p>帮助企业增资，提升递延纳税优惠</p>
|
||
</li>
|
||
<li>
|
||
<img src="/assets/img/box1-4.jpg" alt="logo图片">
|
||
<em style="color: #7daafa;">平台入住</em>
|
||
<p>腾讯/阿里/百度等大平台入住必备条件</p>
|
||
</li>
|
||
<li>
|
||
<img src="/assets/img/box1-5.jpg" alt="logo图片">
|
||
<em style="color: #ffc15d;">减免税收</em>
|
||
<p>办理高新技术企业认定的前提条件，并且享受百万政府补贴</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="box2">
|
||
<!-- 背景定位图片 -->
|
||
<a href="">
|
||
<img class="icon" src="/assets/img/icon.png" alt="">
|
||
</a>
|
||
<div class="location1">
|
||
<img src="/assets/img/location1.jpg" alt="">
|
||
</div>
|
||
<div class="location2">
|
||
<img src="/assets/img/location2.jpg" alt="">
|
||
</div>
|
||
<div class="location3">
|
||
<img src="/assets/img/location3.jpg" alt="">
|
||
</div>
|
||
<!-- 软著申请步骤 -->
|
||
<div class="step">
|
||
<h4>简单三步，完成您的软件著作权登记证书申请</h4>
|
||
<div class="step_head_tab" ref="boxRef">
|
||
<ul>
|
||
<li v-scroll-to="{ el: '.step1', offset: -100}">系统搭建</li>
|
||
<li v-scroll-to="{ el: '.step2', offset: -100}">资料下载</li>
|
||
<li v-scroll-to="{ el: '.step3', offset: -100}">网上申报</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 步骤1 -->
|
||
<div class="step1">
|
||
<div class="left-box">
|
||
<div class="top1">
|
||
<div class="box">
|
||
<p>
|
||
<em>1</em>/<i>3</i>
|
||
</p>
|
||
</div>
|
||
<div class="title">
|
||
<h4>系统搭建</h4>
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li id="step1" v-for="(item1, index) in stepsContent1" :key="index" @click="selectStep1(index)" :class="{ active: currentStepIndex1 === index }" @mouseover="selectStep1(index)">
|
||
<img :src="getStepImage1(item1, index)" alt="">
|
||
<p>{{ item1.text }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="right-box">
|
||
<img :src="getRightBoxImage1(currentStepIndex1)" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- 步骤2 -->
|
||
<div class="step2">
|
||
<div class="left-box">
|
||
<img :src="getRightBoxImage2(currentStepIndex2)" alt="">
|
||
</div>
|
||
<div class="right-box">
|
||
<div class="top2">
|
||
<div class="box">
|
||
<p>
|
||
<em>2</em>/<i>3</i>
|
||
</p>
|
||
</div>
|
||
<div class="title">
|
||
<h4>资料下载</h4>
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li id="step5" v-for="(item2, index) in stepsContent2" :key="index" @click="selectStep2(index)" :class="{ active: currentStepIndex2 === index }" @mouseover="selectStep2(index)">
|
||
<img :src="getStepImage2(item2, index)" alt="">
|
||
<p>{{ item2.text }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 步骤3 -->
|
||
<div class="step3">
|
||
<div class="left-box">
|
||
<div class="top3">
|
||
<div class="box">
|
||
<p>
|
||
<em>3</em>/<i>3</i>
|
||
</p>
|
||
</div>
|
||
<div class="title">
|
||
<h4>网上申报</h4>
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li id="step9" v-for="(item3, index) in stepsContent3" :key="index" @click="selectStep3(index)" :class="{ active: currentStepIndex3 === index }" @mouseover="selectStep3(index)">
|
||
<img :src="getStepImage3(item3, index)" alt="">
|
||
<p>{{ item3.text }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="right-box">
|
||
<img :src="getRightBoxImage3(currentStepIndex3)" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import { onMounted, onUnmounted, ref } from 'vue';
|
||
import axios from 'axios'
|
||
export default {
|
||
data() {
|
||
return {
|
||
oneData: '',
|
||
twoData: '',
|
||
titles: ['生成真实系统 | 可下载安装包', '生成申报材料 | 提供一键导出', '价格明码标价 | 提供价格担保', '提供代理服务 | 也可自行申报'],
|
||
intervalId: null,
|
||
currentTitleIndex: 0,
|
||
|
||
currentStepIndex1: 0,
|
||
currentStepIndex2: 0,
|
||
currentStepIndex3: 0,
|
||
stepsContent1: [
|
||
{ text: '填写系统名称并签署委托开发协议',images: ['step-1.png', 'step-1-1.png'] },
|
||
{ text: '由AI生成系统功能与系统简介',images: ['step-2.png', 'step-2-2.png'] },
|
||
{ text: '填写系统相关所属权信息并生成系统', images: ['step-3.png', 'step-3-3.png'] },
|
||
{ text: '提供灵活的安装包支持公有或私有部署', images: ['step-4.png', 'step-4-4.png'] },
|
||
],
|
||
stepsContent2: [
|
||
{ text: '一键生成软著申请所需的所有材料', images: ['step-5.png', 'step-5-5.png']},
|
||
{ text: '提供源代码审查与查重保证原创性', images: ['step-6.png', 'step-6-6.png']},
|
||
{ text: '提供多种风格的系统皮肤与框架', images: ['step-7.png', 'step-7-7.png']},
|
||
{ text: '提供多种风格和行业的用户操作手册模板', images: ['step-8.png', 'step-8-8.png']},
|
||
],
|
||
stepsContent3: [
|
||
{ text: '提供国家版权登记平台填报服务', images: ['step-9.png', 'step-9-9.png']},
|
||
{ text: '提供申报环节动态实时通知服务', images: ['step-10.png', 'step-10-10.png']},
|
||
{ text: '提供软著材料重新编写与补正服务', images: ['step-11.png', 'step-11-11.png']},
|
||
{ text: '提供申报担保及包下证服务', images: ['step-12.png', 'step-12-12.png']},
|
||
],
|
||
rightBoxImages1: ['1-1.png', '1-2.png', '1-3.png', '1-4.png'],
|
||
rightBoxImages2: ['2-1.png', '2-2.png', '2-3.png', '2-4.png'],
|
||
rightBoxImages3: ['3-1.png', '3-2.png', '3-3.png', '3-4.png'],
|
||
|
||
// number1: '',
|
||
// number2: '' ,
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
selectStep1(index) {
|
||
this.currentStepIndex1 = index; // 设置当前选中的步骤索引
|
||
},
|
||
getStepImage1(item1, index) {
|
||
// 拼接完整的图片路径
|
||
const activeIndex = this.currentStepIndex1 === index ? 1 : 0;
|
||
return `assets/img/${item1.images[activeIndex]}`;
|
||
},
|
||
getRightBoxImage1(index) {
|
||
// 拼接右侧盒子图片的完整路径
|
||
return `assets/img/${this.rightBoxImages1[index]}`;
|
||
},
|
||
|
||
selectStep2(index) {
|
||
this.currentStepIndex2 = index; // 设置当前选中的步骤索引
|
||
},
|
||
getStepImage2(item2, index) {
|
||
// 拼接完整的图片路径
|
||
const activeIndex = this.currentStepIndex2 === index ? 1 : 0;
|
||
return `assets/img/${item2.images[activeIndex]}`;
|
||
},
|
||
getRightBoxImage2(index) {
|
||
// 拼接右侧盒子图片的完整路径
|
||
return `assets/img/${this.rightBoxImages2[index]}`;
|
||
},
|
||
|
||
selectStep3(index) {
|
||
this.currentStepIndex3 = index; // 设置当前选中的步骤索引
|
||
},
|
||
getStepImage3(item3, index) {
|
||
// 拼接完整的图片路径
|
||
const activeIndex = this.currentStepIndex3 === index ? 1 : 0;
|
||
return `assets/img/${item3.images[activeIndex]}`;
|
||
},
|
||
getRightBoxImage3(index) {
|
||
// 拼接右侧盒子图片的完整路径
|
||
return `assets/img/${this.rightBoxImages3[index]}`;
|
||
},
|
||
|
||
// startData() {
|
||
// const dataUrl1 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/c8db34f1-737d-4520-8bd5-fd1b727c87e7`
|
||
// const dataUrl2 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/f2782ed4-8133-4307-b067-c8e8cac16cdd`
|
||
|
||
// axios.get(dataUrl1).then(response => {
|
||
// // console.log(response.data)
|
||
// // console.log(response.data.dataSummary)
|
||
// this.number1 = response.data.dataSummary
|
||
// })
|
||
// .catch(error1 => {
|
||
// console.error('There was an error!', error1);
|
||
// })
|
||
|
||
// axios.get(dataUrl2).then(response => {
|
||
// // console.log(response.data)
|
||
// // console.log(response.data.dataSummary)
|
||
// this.number2 = response.data.dataSummary
|
||
// })
|
||
// .catch(error2 => {
|
||
// console.error('There was an error!', error2);
|
||
// })
|
||
// },
|
||
|
||
|
||
|
||
|
||
startScroll() {
|
||
this.intervalId = setInterval(() => {
|
||
this.currentTitleIndex = (this.currentTitleIndex + 1) % this.titles.length;
|
||
if (this.currentTitleIndex === 0) {
|
||
// 使用Vue的nextTick来在DOM更新后重置过渡效果
|
||
this.$nextTick(() => {
|
||
// this.resetTransition();
|
||
});
|
||
}
|
||
}, 3000);
|
||
},
|
||
// resetTransition() {
|
||
// // 移除过渡效果，然后立即重新添加，以避免动画
|
||
// const titleContainer = document.getElementById('title-container');
|
||
// titleContainer.style.transition = 'none';
|
||
// titleContainer.offsetHeight; // 触发重排
|
||
// titleContainer.style.transition = 'transform 0.5s ease-in-out';
|
||
// },
|
||
stopScroll() {
|
||
clearInterval(this.intervalId);
|
||
},
|
||
|
||
},
|
||
|
||
computed: {
|
||
|
||
titleContainerStyle() {
|
||
return {
|
||
transform: `translateY(-${this.currentTitleIndex * 100}%)`,
|
||
transition: 'transform 0.5s ease-in-out',
|
||
};
|
||
},
|
||
|
||
|
||
},
|
||
|
||
mounted() {
|
||
this.startScroll();
|
||
// this.startData();
|
||
// this.goToLink();
|
||
axios.get(``).then(Response => {
|
||
this.oneData = Response.data
|
||
this.twoData = Response.data
|
||
}).catch(error => {
|
||
console.error('Error fetching data:', error)
|
||
})
|
||
|
||
},
|
||
|
||
// beforeUnmount() {
|
||
// clearInterval(this.intervalId);
|
||
// },
|
||
beforeDestroy() {
|
||
this.stopScroll();
|
||
// this.startData();
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
vertical-align: middle;
|
||
border: 0px solid transparent !important ;
|
||
}
|
||
.active {
|
||
border: 1px solid rgba(0,0,0,.2);
|
||
background-color: #FFF !important;
|
||
}
|
||
.home-page {
|
||
position: relative;
|
||
}
|
||
|
||
.home-page .box-top {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100vh;
|
||
/* background-color: pink; */
|
||
background: url(/assets/img/home-bj.png) no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.home-page .box-top .headline {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* position: absolute;
|
||
left: 50%;
|
||
top: 50%; */
|
||
width: 900px;
|
||
height: 300px;
|
||
/* border: 2px solid red; */
|
||
margin: auto;
|
||
/* margin: auto 300px; */
|
||
|
||
}
|
||
|
||
.home-page .box-top .headline h2 {
|
||
font-size: 50px;
|
||
color: #FFF;
|
||
text-align: center;
|
||
}
|
||
.home-page .box-top .headline #title-container {
|
||
position: relative;
|
||
height: 80px; /* 根据需要调整 */
|
||
overflow: hidden;
|
||
/* border: 1px solid blue; */
|
||
}
|
||
.home-page .box-top .headline .title {
|
||
position: relative;
|
||
top: 0;
|
||
font-size: 50px;
|
||
color: #FFF;
|
||
width: 860px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
margin: auto 20px;
|
||
padding: 0 10px;
|
||
letter-spacing: 6px;
|
||
text-align: center;
|
||
/* border: 1px solid red; */
|
||
transition: transform 0.5s ease-in-out;
|
||
}
|
||
.home-page .box-top .headline p {
|
||
font-size: 18px;
|
||
color: #FFF;
|
||
/* margin: 5px auto; */
|
||
margin: auto;
|
||
letter-spacing: 2px;
|
||
}
|
||
.home-page .box-top .headline p em {
|
||
font-size: 30px;
|
||
}
|
||
.home-page .box-top .headline .button-box {
|
||
font-size: 26px;
|
||
/* margin: 20px auto; */
|
||
margin: auto;
|
||
}
|
||
.home-page .box-top .headline .button-box button {
|
||
padding: 10px 45px;
|
||
margin-left: 20px;
|
||
border: none;
|
||
}
|
||
.home-page .box-top .headline .button-box button:first-child {
|
||
background-color: #39C7C1;
|
||
/* color: #FFF; */
|
||
}
|
||
.home-page .box-top .headline .button-box button:first-child a {
|
||
color: #FFF;
|
||
}
|
||
|
||
.home-page .box-top .headline.button-box button:first-child:hover {
|
||
background-color: #00A99D;
|
||
color: #FFF;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.home-page .box-top .headline .button-box button:last-child:hover {
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.home-page .box-bottom {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 2100px;
|
||
background-color: #fff;
|
||
}
|
||
.home-page .box-bottom .box1 {
|
||
height: 450px;
|
||
margin: 70px auto;
|
||
text-align: center;
|
||
/* border: 2px solid red; */
|
||
}
|
||
.home-page .box-bottom .box1 h4 {
|
||
margin-top: 15px;
|
||
font-size: 28px;
|
||
}
|
||
.home-page .box-bottom .box1 p {
|
||
font-size: 14px;
|
||
margin: 15px auto;
|
||
color: #a2a2a2;
|
||
}
|
||
.home-page .box-bottom .box1 ul {
|
||
display: flex;
|
||
}
|
||
.home-page .box-bottom .box1 ul li {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 130px;
|
||
margin: 40px 40px;
|
||
/* padding: 0 30px; */
|
||
}
|
||
.home-page .box-bottom .box1 ul li img {
|
||
width: 110px;
|
||
height: 110px;
|
||
margin: 0 auto;
|
||
}
|
||
.home-page .box-bottom .box1 ul li em {
|
||
font-size: 16px;
|
||
margin: 20px auto 0px auto;
|
||
font-weight: 700;
|
||
}
|
||
.home-page .box-bottom .box1 ul li p {
|
||
/* font-size: 14px; */
|
||
line-height: 30px;
|
||
}
|
||
/* 软著申请步骤--------------------------------------- */
|
||
.home-page .box-bottom .box2 {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 1500px;
|
||
margin: 20px auto;
|
||
/* border: 2px solid red; */
|
||
}
|
||
.home-page .box-bottom .icon {
|
||
/* position: absolute; */
|
||
position: fixed;
|
||
z-index: 20;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
width: 80px;
|
||
height: 80px;
|
||
cursor: pointer;
|
||
}
|
||
.home-page .box-bottom .location1{
|
||
position: absolute;
|
||
top: 160px;
|
||
/* right: -150px; */
|
||
right: 0;
|
||
width: 270px;
|
||
height: 330px;
|
||
/* border: 2px solid red; */
|
||
/* z-index: 100; */
|
||
}
|
||
.home-page .box-bottom .location2{
|
||
position: absolute;
|
||
top: 380px;
|
||
/* left: -180px; */
|
||
left: 0;
|
||
width: 240px;
|
||
height: 320px;
|
||
/* border: 2px solid red; */
|
||
/* z-index: 100; */
|
||
}
|
||
.home-page .box-bottom .location3{
|
||
position: absolute;
|
||
top: 830px;
|
||
/* right: -150px; */
|
||
right: 0;
|
||
width: 270px;
|
||
height: 330px;
|
||
/* border: 2px solid red; */
|
||
/* z-index: 100; */
|
||
}
|
||
.home-page .box-bottom .box2 .step {
|
||
margin: 10px;
|
||
/* border: 2px solid red; */
|
||
}
|
||
|
||
.home-page .box-bottom .box2 .step h4 {
|
||
text-align: center;
|
||
font-size: 30px;
|
||
padding: 20px 30px;
|
||
}
|
||
.home-page .box-bottom .box2 .step .step_head_tab {
|
||
/* position: fixed;
|
||
backdrop-filter: blur(10px); */
|
||
top: 90px;
|
||
left: 0;
|
||
z-index: 9999999;
|
||
width: 100%;
|
||
height: 60px;
|
||
background-color: rgba(255,255,255,.6);
|
||
}
|
||
|
||
.home-page .box-bottom .box2 .step .stepscrollfix {
|
||
position: fixed;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.home-page .box-bottom .box2 .step ul {
|
||
display: flex;
|
||
/* flex-direction: column; */
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
width: 600px;
|
||
height: 60px;
|
||
margin: auto;
|
||
|
||
}
|
||
.home-page .box-bottom .box2 .step ul li {
|
||
/* padding: 10px 35px; */
|
||
width: 200px;
|
||
height: 52px;
|
||
line-height: 42px;
|
||
text-align: center;
|
||
background-color: #FFF;
|
||
border: 5px solid #f8fbfd;
|
||
cursor: pointer;
|
||
}
|
||
.home-page .box-bottom .box2 .step ul li:nth-child(2) {
|
||
border-left: 0;
|
||
border-right: 0;
|
||
}
|
||
|
||
/* 步骤1------------------- */
|
||
.home-page .box-bottom .box2 .step1 {
|
||
position: relative;
|
||
z-index: 10;
|
||
display: flex;
|
||
width: 1100px;
|
||
height: 380px;
|
||
/* border: 2px solid red; */
|
||
margin: 30px auto;
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box {
|
||
position: relative;
|
||
width: 370px;
|
||
height: 360px;
|
||
margin: 10px;
|
||
/* border: 2px solid red; */
|
||
}
|
||
/* 步骤一二三上方题目 */
|
||
.home-page .box-bottom .box2 .step1 .left-box .top1 {
|
||
width: 180px;
|
||
height: 150px;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 110px;
|
||
height: 100px;
|
||
background: url(/assets/img/step-top1.png) no-repeat;
|
||
}
|
||
|
||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box p {
|
||
position: absolute;
|
||
left: 25px;
|
||
bottom: 0;
|
||
width: 60px;
|
||
font-size: 22px;
|
||
/* border: 1px solid blue; */
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box p em {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box .top1 .title {
|
||
position: absolute;
|
||
top: 100px;
|
||
width: 180px;
|
||
height: 50px;
|
||
text-align: center;
|
||
/* border: 1px solid green; */
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box .top1 h4 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin: 0 auto;
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box ul li {
|
||
display: flex;
|
||
height: 42.5px;
|
||
border-radius: 7px;
|
||
margin: 8px;
|
||
background-color: #f9f9f9;
|
||
cursor: pointer;
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box ul .newStyle {
|
||
border: 0.25px solid #B3B3B3;
|
||
background-color: transparent;
|
||
}
|
||
|
||
|
||
.home-page .box-bottom .box2 .step1 .left-box ul li img {
|
||
width: 25px;
|
||
height: 25px;
|
||
margin: auto 10px;
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .left-box ul li p {
|
||
font-size: 16px;
|
||
margin: auto 5px;
|
||
}
|
||
.home-page .box-bottom .box2 .step1 .right-box {
|
||
z-index: 999;
|
||
width: 650px;
|
||
height: 360px;
|
||
margin: 10px 10px 10px auto;
|
||
/* border: 2px solid red; */
|
||
}
|
||
/* 步骤2----------------------------------------- */
|
||
.home-page .box-bottom .box2 .step2 {
|
||
position: relative;
|
||
z-index: 10;
|
||
display: flex;
|
||
width: 1100px;
|
||
height: 380px;
|
||
/* border: 2px solid red; */
|
||
margin: 30px auto;
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .left-box {
|
||
position: relative;
|
||
width: 650px;
|
||
height: 360px;
|
||
margin: 10px auto 10px 10px;
|
||
/* border: 2px solid red; */
|
||
}
|
||
|
||
.home-page .box-bottom .box2 .step2 .right-box {
|
||
position: relative;
|
||
width: 370px;
|
||
height: 360px;
|
||
margin: 10px;
|
||
/* border: 2px solid red; */
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box .top2 {
|
||
/* position: absolute; */
|
||
right: 0;
|
||
width: 180px;
|
||
height: 150px;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 110px;
|
||
height: 100px;
|
||
background: url(/assets/img/step-top2.png) no-repeat;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p {
|
||
position: absolute;
|
||
right: 20px;
|
||
bottom: 0;
|
||
width: 60px;
|
||
font-size: 22px;
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p em {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box .top2 .title {
|
||
position: absolute;
|
||
top: 100px;
|
||
right: 0;
|
||
width: 180px;
|
||
height: 50px;
|
||
text-align: center;
|
||
/* border: 1px solid green; */
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box .top2 .title h4 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.home-page .box-bottom .box2 .step2 .right-box ul li {
|
||
display: flex;
|
||
height: 42.5px;
|
||
border-radius: 7px;
|
||
margin: 8px;
|
||
background-color: #f9f9f9;
|
||
cursor: pointer;
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box ul .newStyle {
|
||
border: 0.25px solid #B3B3B3;
|
||
background-color: transparent;
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box ul li img {
|
||
width: 25px;
|
||
height: 25px;
|
||
margin: auto 10px;
|
||
}
|
||
.home-page .box-bottom .box2 .step2 .right-box ul li p {
|
||
font-size: 16px;
|
||
margin: auto 5px;
|
||
}
|
||
/* 步骤3--------------------------------------- */
|
||
.home-page .box-bottom .box2 .step3 {
|
||
position: relative;
|
||
z-index: 10;
|
||
display: flex;
|
||
width: 1100px;
|
||
height: 380px;
|
||
/* border: 2px solid red; */
|
||
margin: 30px auto;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box {
|
||
width: 370px;
|
||
height: 360px;
|
||
margin: 10px;
|
||
/* border: 2px solid red; */
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box .top3 {
|
||
position: relative;
|
||
width: 180px;
|
||
height: 150px;
|
||
/* border: 1px solid red; */
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 110px;
|
||
height: 100px;
|
||
background: url(/assets/img/step-top3.png) no-repeat;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p {
|
||
position: absolute;
|
||
left: 25px;
|
||
bottom: 0;
|
||
width: 60px;
|
||
font-size: 22px;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p em {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box .top3 .title {
|
||
position: absolute;
|
||
top: 100px;
|
||
width: 180px;
|
||
height: 50px;
|
||
text-align: center;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box .top3 .title h4 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin: 0 auto;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box ul li {
|
||
display: flex;
|
||
height: 42.5px;
|
||
border-radius: 7px;
|
||
margin: 8px;
|
||
background-color: #f9f9f9;
|
||
cursor: pointer;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box ul .newStyle {
|
||
border: 0.25px solid #B3B3B3;
|
||
background-color: transparent;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box ul li img {
|
||
width: 25px;
|
||
height: 25px;
|
||
margin: auto 10px;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .left-box ul li p {
|
||
font-size: 16px;
|
||
margin: auto 5px;
|
||
}
|
||
.home-page .box-bottom .box2 .step3 .right-box {
|
||
position: relative;
|
||
width: 650px;
|
||
height: 360px;
|
||
margin: 10px 10px 10px auto;
|
||
/* border: 2px solid red; */
|
||
}
|
||
</style> |