index.vue
<template> <view> <tophead></tophead> <topnav></topnav> <leftnav></leftnav> </view> </template> <script> import tophead from '../../components/header.vue'; import topnav from '../../components/nav.vue'; import leftnav from '../../components/left-nav.vue'; export default { components:{ tophead, topnav, leftnav }, data() { return { } }, onLoad() {
}, methods: {
} } </script>
<style> .uni-page-head{ display: none; } </style>
nav.vue
<template> <view class="nav"> <view class="mynav"> <view class="nav-l"> 宠物大全 </view> <view class="nav-r"> <navigator>{{nav1}}</navigator> <navigator>{{nav2}}</navigator> <navigator>{{nav3}}</navigator> <navigator>{{nav4}}</navigator> <navigator>{{nav5}}</navigator> </view> </view> </view> </template>
<script> export default { data() { return { nav1:'首页', nav2:'宠物百科', nav3:'宠物问答', nav4:'宠物视频', nav5:'萌宠日常' }; } } </script>
<style> .mynav{ box-shadow: 0 1px 4px 0 rgba(0,0,0,.1); background: #fff; border: 0; margin-bottom: 0; z-index: 9; padding: 0 44upx; display: flex; } .nav-l{ height: 29upx; line-height: 28upx; color: #fff; width: 129.5upx; background: rgba(11,139,255,.85); font-size: 9.5upx; padding-left: 9upx; float: left; } .nav-r{ height: 29upx; line-height: 12upx; color: #333; width: 278.5upx; margin: 0!important; font-size: 9.5upx; display: flex; } .nav-r navigator{ padding: 9upx 11upx; width: 57.5upx; font-size: 7.5upx; } .nav-l:hover{ cursor: pointer; } .nav-r:hover{ cursor: pointer; } .nav-r navigator:nth-child(1){ color: #0b8bff; } </style>
head.vue
<template> <view> </view> </template>
<script> export default { data() { return { }; } } </script>
<style>
</style>
header.vue
<template> <view> <view class="top"> <navigator href="#">切换地区</navigator> <view class="user" v-html="html"> </view> </view> <view class="btn"> <view class="input-left"> <image class="logo" src="/static/logo.jpg"></image> </view> <view class="input-right"> <input type="text" class="form-control" placeholder=" "> <button class="search-btn"><navigator></navigator></button> </view> </view> </view> </template>
<script> export default { data() { return { html:'<navigator href="#" style="position: absolute;right: 11%">登录</navigator><navigator href="#" style="position: absolute;right: 8%;">注册</navigator>', }; } } </script>
<style> .top{ position: fixed; top: 0; width: 100%; height: 22upx; font-size: 7.5upx; line-height: 22upx; font-weight: 400; color: #999; padding: 0; background: #F8F8F8; display: flex; z-index: 10; } .top navigator:nth-child(1){ padding: 0 44upx; } .btn{ padding: 0 44upx; display: flex; } .logo{ height: 34upx; width: 34.5upx; margin-top: 17upx; } .input-right{ margin-left: 147upx; height: 22upx; } .form-control{ border: #0b8bff 1px solid; font-size: 7.5upx; height: 25upx; width: 260upx; margin-top: 20upx; margin-bottom: 20upx; display: flex; min-height:0.5rem; line-height: 20upx; } .search-btn{ width: 48upx; position: absolute; left: 460upx; padding-top: 1px; top: 19.8upx; background: #0b8bff; border: #0b8bff; color: #FFF; border-radius: 0; } .search-btn navigator{ background: #0B8BFF url(../static/search.png) 0 0/cover; height: 11upx; width: 11upx; margin: 7.5upx 10upx; } </style>
left,vue
<template> <view> <view class="nav-left"> <div class="fixed-navbar indexPage" id="fixed-navbar"> <ul> <li v-for="lii in lii"><a href="#">{{lii}}</a><image src="/static/next.png"></image></li> </ul> </div> </view> <view class="uni-padding-wrap"> <view class="page-section swiper"> <view class="page-section-spacing"> <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" indicator-color="#00529c50" indicator-active-color="#0B8BFF"> <swiper-item> <view class="swiper-item uni-bg-red">A</view> </swiper-item> <swiper-item> <view class="swiper-item uni-bg-green">B</view> </swiper-item> <swiper-item> <view class="swiper-item uni-bg-blue">C</view> </swiper-item> </swiper> </view> </view> </view> </view> </template>
<script> export default { data() { return { lii:["宠物狗","宠物猫","龙猫","仓鼠","宠物鱼","宠物虾","松鼠","宠物鸟","豚鼠","宠物貂","宠物龟","宠物兔","宠物蛇"], indicatorDots: true, autoplay: true, interval: 2000, duration: 500, } }, methods: { changeIndicatorDots(e) { this.indicatorDots = !this.indicatorDots }, changeAutoplay(e) { this.autoplay = !this.autoplay }, intervalChange(e) { this.interval = e.target.value }, durationChange(e) { this.duration = e.target.value } } } </script>
<style> .nav-left{ width: 138upx; height: 231upx; position: relative; left: 44upx; background: rgba(11,139,255,.85); background: -webkit-linear-gradient(-90deg,rgba(11,139,255,.85) 2%,rgba(2,181,157,.85) 100%); background: -o-linear-gradient(-90deg,rgba(11,139,255,.85) 2%,rgba(2,181,157,.85) 100%); background: -moz-linear-gradient(-90deg,rgba(11,139,255,.85) 2%,rgba(2,181,157,.85) 100%); } .fixed-navbar ul li:hover{ background: #66CCFF80; } .fixed-navbar ul li>a{ color: #fff; display: block; height: 17.5upx; line-height: 17.5upx; padding: 0 9upx; font-size: 8upx; } .fixed-navbar ul li{ height: 17.5upx; } .fixed-navbar image{ height: 9upx; width: 9upx; position: relative; left: 128.5upx; bottom: 44upx; } swiper{ height: 220upx; width: 522upx; position: absolute; left: 192.5upx; top: 99.5upx; } swiper swiper-item{ background: url(../static/c1920.jpg) 0 0/cover; } uni-swiper .uni-swiper-dot-active { background-color: #0B8BFF; } </style>
