Skip to content

Z
zhichan
Commit c844a436 by 尹亚亭
Options

finish static layout of index

parent 25798f71
Showing with 237 additions and 88 deletions
h5-channel-web/src/views/Home.vue
......@@ -41,3 +41,14 @@ export default {
}
};
</script>
<style lang="scss" >
.home {
main {
height: 617px;
}
nav {
height: 50px;
}
}
</style>
h5-channel-web/src/views/pages/home/HomeTab.vue
......@@ -2,94 +2,121 @@
<div class="home-tab">
<!-- 头部导航栏 -->
<van-nav-bar title="首页" left-text="关闭" left-arrow @click-left="onClickLeft" />
<!-- 中间banner图 -->
<div class="banner">
<img src="@/assets/images/home/banner.png" alt />
</div>
<!-- 商标注册服务标题 -->
<div class="title-wrap">
<i></i>
<span>商标注册服务</span>
<b></b>
</div>
<!-- 商标注册服务：自助注册 专家辅助 担保申请 -->
<div class="reg-classify">
<ul>
<li>
<h3>自助注册</h3>
<h4>适合熟知商标注册流程的企业用户</h4>
<div class="line"></div>
<div class="desc">
<p>
<strong></strong>
<span>自己检索商标,准备官方所需注册材料</span>
</p>
<!-- 模拟写死的数据 -->
<p>
<strong></strong>
<span>提交迅速,及时反馈</span>
</p>
<p>
<strong></strong>
<span>全程跟踪,掌握申请进度</span>
</p>
</div>
<div class="price">
<i>￥300</i>
<b>/ 类</b>
</div>
<div class="button" @click="goToSelfReg">立即办理</div>
</li>
<!-- 模拟写死的数据 -->
<li>
<h3>专家辅助</h3>
<h4>适合熟知商标注册流程的企业用户</h4>
<div class="line"></div>
<div class="desc">
<p>
<strong></strong>
<span>自己检索商标,准备官方所需注册材料</span>
</p>
<p>
<strong></strong>
<span>提交迅速,及时反馈</span>
</p>
<p>
<strong></strong>
<span>全程跟踪,掌握申请进度</span>
</p>
</div>
<div class="price">
<i>￥680</i>
<b>/ 类</b>
</div>
<div class="button" @click="goToOtherreg">立即办理</div>
</li>
<li>
<h3>专家辅助</h3>
<h4>适合熟知商标注册流程的企业用户</h4>
<div class="line"></div>
<div class="desc">
<p>
<strong></strong>
<span>自己检索商标,准备官方所需注册材料</span>
</p>
<p>
<strong></strong>
<span>提交迅速,及时反馈</span>
</p>
<p>
<strong></strong>
<span>全程跟踪,掌握申请进度</span>
</p>
</div>
<div class="price">
<i>￥1380</i>
<b>/ 类</b>
</div>
<div class="button" @click="goToOtherreg">立即办理</div>
</li>
</ul>
<div class="content">
<!-- 中间banner图 -->
<div class="banner">
<img src="@/assets/images/home/banner.png" alt />
</div>
<!-- 商标注册服务标题 -->
<div class="title-wrap">
<i></i>
<span>商标注册服务</span>
<b></b>
</div>
<!-- 商标注册服务：自助注册 专家辅助 担保申请 -->
<div class="reg-classify">
<ul>
<li>
<h3>自助注册</h3>
<h4>适合熟知商标注册流程的企业用户</h4>
<div class="line"></div>
<div class="desc">
<p>
<strong></strong>
<span>自己检索商标,准备官方所需注册材料</span>
</p>
<!-- 模拟写死的数据 -->
<p>
<strong></strong>
<span>提交迅速,及时反馈</span>
</p>
<p>
<strong></strong>
<span>全程跟踪,掌握申请进度</span>
</p>
</div>
<div class="price">
<i>￥300</i>
<b>/ 类</b>
</div>
<div class="button" @click="goToSelfReg">立即办理</div>
</li>
<!-- 模拟写死的数据 -->
<li>
<h3>专家辅助</h3>
<h4>适合熟知商标注册流程的企业用户</h4>
<div class="line"></div>
<div class="desc">
<p>
<strong></strong>
<span>自己检索商标,准备官方所需注册材料</span>
</p>
<p>
<strong></strong>
<span>提交迅速,及时反馈</span>
</p>
<p>
<strong></strong>
<span>全程跟踪,掌握申请进度</span>
</p>
</div>
<div class="price">
<i>￥680</i>
<b>/ 类</b>
</div>
<div class="button" @click="goToOtherreg">立即办理</div>
</li>
<li>
<h3>专家辅助</h3>
<h4>适合熟知商标注册流程的企业用户</h4>
<div class="line"></div>
<div class="desc">
<p>
<strong></strong>
<span>自己检索商标,准备官方所需注册材料</span>
</p>
<p>
<strong></strong>
<span>提交迅速,及时反馈</span>
</p>
<p>
<strong></strong>
<span>全程跟踪,掌握申请进度</span>
</p>
</div>
<div class="price">
<i>￥1380</i>
<b>/ 类</b>
</div>
<div class="button" @click="goToOtherreg">立即办理</div>
</li>
</ul>
</div>
<!-- 图文说明：注册流程 服务优势 常见问题 增值服务 -->
<div class="pic-wrap pic-one">
<h2>注册流程</h2>
<h3>轻松掌握注册流程</h3>
<div class="short-line"></div>
<b></b>
</div>
<div class="pic-wrap pic-two">
<h2>服务优势</h2>
<h3>金牌服务让您省心</h3>
<div class="short-line"></div>
<b></b>
</div>
<div class="pic-wrap pic-three">
<h2>常见问题</h2>
<h3>疑难解答在这里</h3>
<div class="short-line"></div>
<b></b>
</div>
<div class="pic-wrap pic-four">
<h2>增值服务</h2>
<h3>免费为您开启</h3>
<div class="short-line"></div>
<b></b>
</div>
</div>
</div>
</template>
......@@ -114,7 +141,15 @@ export default {
<style lang="scss" scoped>
.home-tab {
height: 100%;
background: #fbf8fb;
.van-nav-bar {
height: 46px;
}
.content {
height: 571px;
overflow-y: scroll;
}
.banner {
height: 188px;
img {
......@@ -240,5 +275,107 @@ export default {
}
}
}
.pic-wrap {
display: inline-block;
width: 170px;
height: 92px;
position: relative;
h2 {
width: 80px;
line-height: 25px;
font-size: 18px;
padding: 16px 0 4px 20px;
}
h3 {
width: 100px;
line-height: 17px;
font-size: 12px;
padding-left: 20px;
position: absolute;
z-index: 2;
}
.short-line {
width: 10px;
height: 2px;
position: absolute;
top: 68px;
left: 21px;
}
b {
display: inline-block;
width: 71px;
height: 61px;
background-size: 100% 100%;
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
}
}
.pic-one {
margin: 0 9px 9px 13px;
background: #ece8f0;
h2 {
color: #7963ad;
padding: 16px 0 4px 20px;
}
h3 {
color: #7963ad;
padding-left: 20px;
}
.short-line {
background: #7963ad;
}
b {
background: url("../../../assets/images/home/zclc.png") no-repeat;
}
}
.pic-two {
background: #fff0dc;
h2 {
color: #a37d50;
}
h3 {
color: #a37d50;
}
.short-line {
background: #a37d50;
}
b {
background: url("../../../assets/images/home/fwys.png") no-repeat;
}
}
.pic-three {
background: #dbeafc;
margin: 0 9px 13px 13px;
h2 {
color: #5e718c;
}
h3 {
color: #5e718c;
}
.short-line {
background: #5e718c;
}
b {
background: url("../../../assets/images/home/cjwt.png") no-repeat;
}
}
.pic-four {
margin-bottom: 13px;
background: #f7eae7;
h2 {
color: #9d664f;
}
h3 {
color: #9d664f;
}
.short-line {
background: #9d664f;
}
b {
background: url("../../../assets/images/home/zzfw.png") no-repeat;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment