v
This commit is contained in:
zmr900709
commit
9bf8ed444f
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
|||||||
.vscode
|
.vscode
|
||||||
|
node_modules
|
||||||
5
App.vue
5
App.vue
@ -11,7 +11,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
<style>
|
@import "/static/css/normalize"
|
||||||
/*每个页面公共css */
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
## 使用
|
## 使用
|
||||||
- scss
|
- scss
|
||||||
- uniapp
|
- uniapp
|
||||||
- 组建库待定
|
- 组建库 [uview](http://www.uviewui.com/)
|
||||||
## 目录结构
|
## 目录结构
|
||||||
```1=
|
```1=
|
||||||
|-pages tabes 目录
|
|-pages tabes 目录
|
||||||
|
|||||||
25
components/index/ad/index.vue
Normal file
25
components/index/ad/index.vue
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<swiper class="ad" indicator-dots="true" indicator-color="#fff" indicator-active-color="#634838">
|
||||||
|
<swiper-item></swiper-item>
|
||||||
|
<swiper-item></swiper-item>
|
||||||
|
<swiper-item></swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ad{
|
||||||
|
width: 100%;
|
||||||
|
height: 294rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #0f0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"ad",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
54
components/index/daren-item/index.vue
Normal file
54
components/index/daren-item/index.vue
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<view class="daren-item">
|
||||||
|
<image class="head"></image>
|
||||||
|
<text class="name">这是名字</text>
|
||||||
|
<text class="zhuangtai">直播状态</text>
|
||||||
|
<view class="guanzhu">关注</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"daren-item"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.daren-item{
|
||||||
|
width: 215rpx;
|
||||||
|
height: 282rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
.head{
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
background-color: #0f0;
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: 23rpx;
|
||||||
|
}
|
||||||
|
.zhuangtai{
|
||||||
|
font-size:22rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 19rpx;
|
||||||
|
}
|
||||||
|
.guanzhu{
|
||||||
|
width: 130rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
background-color: #FF780F;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 19rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
96
components/index/video-item/index.vue
Normal file
96
components/index/video-item/index.vue
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<template>
|
||||||
|
<view class="video-item">
|
||||||
|
<image class="head">
|
||||||
|
|
||||||
|
</image>
|
||||||
|
<view class="title">这是标题这是标题这是标题</view>
|
||||||
|
<view class="jianjie">这是简介这是简介这是简介</view>
|
||||||
|
<view class="user">
|
||||||
|
<view>
|
||||||
|
<image></image>
|
||||||
|
<text>这是名字</text>
|
||||||
|
</view>
|
||||||
|
<image></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.video-item{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
width: 335rpx;
|
||||||
|
box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
.head{
|
||||||
|
width: 100%;
|
||||||
|
height: 334rpx;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin:0 auto;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 30rpx;
|
||||||
|
width: 307rpx;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
display:-webkit-box;
|
||||||
|
-webkit-box-orient:vertical;
|
||||||
|
-webkit-line-clamp:2;
|
||||||
|
}
|
||||||
|
.jianjie{
|
||||||
|
margin:0 auto;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 30rpx;
|
||||||
|
width: 307rpx;
|
||||||
|
margin-left: 18rpx;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
display:-webkit-box;
|
||||||
|
-webkit-box-orient:vertical;
|
||||||
|
-webkit-line-clamp:2;
|
||||||
|
|
||||||
|
}
|
||||||
|
.user{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin:0 auto;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
width: 307rpx;
|
||||||
|
>view{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>image{
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
>text{
|
||||||
|
font-size: 20rpx;
|
||||||
|
color:#333;
|
||||||
|
margin-left: 9rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>image{
|
||||||
|
width: 37rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"index-item",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
75
components/index/zhibo-item/index.vue
Normal file
75
components/index/zhibo-item/index.vue
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<view class="zhibo">
|
||||||
|
<image class="head"></image>
|
||||||
|
<view class="user">
|
||||||
|
<view class="name">
|
||||||
|
<image></image>
|
||||||
|
<text>这是名字</text>
|
||||||
|
</view>
|
||||||
|
<view class="pingbi">
|
||||||
|
<image></image>
|
||||||
|
<text>屏蔽用户</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.zhibo{
|
||||||
|
width: 335rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
.head{
|
||||||
|
width: 100%;
|
||||||
|
height: 425rpx;
|
||||||
|
}
|
||||||
|
.user{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin:0 auto;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
width: 307rpx;
|
||||||
|
.name{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>image{
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
>text{
|
||||||
|
font-size: 20rpx;
|
||||||
|
color:#333;
|
||||||
|
margin-left: 9rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pingbi{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>text{
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-left: 9rpx;
|
||||||
|
}
|
||||||
|
>image{
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"zhibo-item",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
4
main.js
4
main.js
@ -1,8 +1,8 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
import uView from "uview-ui";
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
Vue.use(uView);
|
||||||
App.mpType = 'app'
|
App.mpType = 'app'
|
||||||
|
|
||||||
const app = new Vue({
|
const app = new Vue({
|
||||||
|
|||||||
13
package-lock.json
generated
Normal file
13
package-lock.json
generated
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "deming",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 1,
|
||||||
|
"requires": true,
|
||||||
|
"dependencies": {
|
||||||
|
"uview-ui": {
|
||||||
|
"version": "1.2.9",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/uview-ui/download/uview-ui-1.2.9.tgz",
|
||||||
|
"integrity": "sha1-PwC6ziaB/LXyMacGRkMfPrZfF2c="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
package.json
Normal file
18
package.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "deming",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "- scss - uniapp - 组建库 [uview](http://www.uviewui.com/) ## 目录结构 ```1= |-pages tabes 目录 |-pageA 前期注册用页面 |-pageB 首页类页面 |-pageC 商城下页面 |-pageD 我的页面 |-pageE 其余杂乱页面 |-components 组建目录 |-static 静态文件目录 |-|images 图片文件 |util js库文件 |App.js |main.js |pages.json |manifest.json |uni.scss ``` ## 开发规范 - 使用组建化 - 要使用scss - 命名尽量规范 可以语义化但不可以胡乱输入 - scss层级关系使用好 - 统一使用rpx - 组建目录需要根据页面或功能命名子目录 ## 分支开发规则 - master分支将开启保护 请使用gitea合并功能 - 每人各自工作分支 每天合并 - 合并请及时拉取处理冲突",
|
||||||
|
"main": "main.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "http://git.luyuan.tk/luyuan/deming.git"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"uview-ui": "^1.2.9"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -26,20 +26,58 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- 注册 -->
|
<!-- 注册 -->
|
||||||
<view class="more_Login">
|
<view class="more_Login">
|
||||||
|
<u-radio-group v-model="value" @change="radioGroupChange">
|
||||||
|
<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
|
||||||
|
{{item.name}}
|
||||||
|
</u-radio>
|
||||||
|
</u-radio-group>
|
||||||
<text>新用户点击注册</text>
|
<text>新用户点击注册</text>
|
||||||
<text class="other">其他方式登录</text>
|
<text class="other">其他方式登录</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [{
|
||||||
|
name: 'apple',
|
||||||
|
checked: false,
|
||||||
|
disabled: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'banner',
|
||||||
|
checked: false,
|
||||||
|
disabled: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'orange',
|
||||||
|
checked: false,
|
||||||
|
disabled: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
value: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选中某个单选框时，由radio时触发
|
||||||
|
radioChange(e) {
|
||||||
|
// console.log(e);
|
||||||
|
},
|
||||||
|
// 选中任一radio时，由radio-group触发
|
||||||
|
radioGroupChange(e) {
|
||||||
|
// console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login{
|
.login {
|
||||||
|
|
||||||
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
|
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
|
||||||
.images{
|
.images {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -47,79 +85,93 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.backes{
|
|
||||||
background: rgba(0,0,0,0.1);
|
.backes {
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
}
|
}
|
||||||
text{
|
|
||||||
|
text {
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.more_Login{
|
|
||||||
|
.more_Login {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
zoom: 1;
|
zoom: 1;
|
||||||
width: 630rpx;
|
width: 630rpx;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.more_Login text{
|
|
||||||
|
.more_Login text {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
float: left;
|
float: left;
|
||||||
font-size:30rpx;
|
font-size: 30rpx;
|
||||||
color:rgba(255,255,255,1);
|
color: rgba(255, 255, 255, 1);
|
||||||
line-height:36px;
|
line-height: 36px;
|
||||||
margin: 97rpx 0;
|
margin: 97rpx 0;
|
||||||
}
|
}
|
||||||
.more_Login .other{
|
|
||||||
|
.more_Login .other {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title{
|
|
||||||
font-size:36rpx;
|
.title {
|
||||||
font-weight:bold;
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
margin-bottom: 150rpx;
|
margin-bottom: 150rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.content{
|
|
||||||
|
.content {
|
||||||
width: 630rpx;
|
width: 630rpx;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-top: 130rpx;
|
padding-top: 130rpx;
|
||||||
.labales text{
|
|
||||||
|
.labales text {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
}
|
}
|
||||||
.labales{
|
|
||||||
|
.labales {
|
||||||
border-bottom: 1px #fff solid;
|
border-bottom: 1px #fff solid;
|
||||||
margin-bottom: 90rpx;
|
margin-bottom: 90rpx;
|
||||||
}
|
}
|
||||||
.labales{
|
|
||||||
|
.labales {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.identifying{
|
|
||||||
|
.identifying {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-size:30rpx;
|
font-size: 30rpx;
|
||||||
font-weight:500;
|
font-weight: 500;
|
||||||
color:rgba(255,120,15,1);
|
color: rgba(255, 120, 15, 1);
|
||||||
line-height:36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pact text{
|
|
||||||
font-size:22rpx;
|
.pact text {
|
||||||
font-weight:400;
|
font-size: 22rpx;
|
||||||
color:rgba(255,255,255,1);
|
font-weight: 400;
|
||||||
line-height:36px;
|
color: rgba(255, 255, 255, 1);
|
||||||
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
.pact_text{
|
|
||||||
font-size:22px;
|
.pact_text {
|
||||||
font-weight:400;
|
font-size: 22px;
|
||||||
color:rgba(129,188,253,1)!important;
|
font-weight: 400;
|
||||||
line-height:36px;
|
color: rgba(129, 188, 253, 1) !important;
|
||||||
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,4 +1,7 @@
|
|||||||
{
|
{
|
||||||
|
"easycom": {
|
||||||
|
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||||
|
},
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
{
|
{
|
||||||
"path": "pageA/welcome/welcome",
|
"path": "pageA/welcome/welcome",
|
||||||
@ -9,6 +12,7 @@
|
|||||||
"titleNView": false,
|
"titleNView": false,
|
||||||
"animationType": "slide-in-bottom"
|
"animationType": "slide-in-bottom"
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,58 +1,184 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<view class="index">
|
||||||
|
<view class="top">
|
||||||
|
<view class="sosuo"></view>
|
||||||
|
<view class="tabs">
|
||||||
|
<view class="xuanzhong ">发现</view>
|
||||||
|
<view>直播</view>
|
||||||
|
<view>关注</view>
|
||||||
|
</view>
|
||||||
|
<view class="sosuo"></view>
|
||||||
|
</view>
|
||||||
|
<swiper class="card">
|
||||||
|
<swiper-item>
|
||||||
|
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
||||||
|
<view class="box">
|
||||||
|
<indexad style="width:690rpx"></indexad>
|
||||||
|
<view class="list">
|
||||||
|
<view >
|
||||||
|
<videoItem v-for="item in 10"></videoItem>
|
||||||
|
</view>
|
||||||
|
<view style="margin-left:20rpx">
|
||||||
|
<videoItem v-for="item in 10"></videoItem>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="content">
|
</scroll-view>
|
||||||
<image class="logo" src="/static/logo.png"></image>
|
</swiper-item>
|
||||||
<view class="text-area">
|
<swiper-item>
|
||||||
<text class="title">{{title}}</text>
|
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
||||||
|
<view class="box">
|
||||||
|
<indexad style="width:690rpx"></indexad>
|
||||||
|
<view class="list">
|
||||||
|
<view >
|
||||||
|
<zhiboItem v-for="item in 10"></zhiboItem>
|
||||||
|
</view>
|
||||||
|
<view style="margin-left:20rpx">
|
||||||
|
<zhiboItem v-for="item in 10"></zhiboItem>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<scroll-view style="width:100%;height:100%" scroll-y="true">
|
||||||
|
<view class="box">
|
||||||
|
<view class="tuijian">
|
||||||
|
<view class="title">
|
||||||
|
<view class="left">
|
||||||
|
<view></view>
|
||||||
|
<text>推荐达人</text>
|
||||||
|
</view>
|
||||||
|
<image class="right"></image>
|
||||||
|
</view>
|
||||||
|
<view class="tuijianlist">
|
||||||
|
<darenItem style="margin-right:23rpx"></darenItem>
|
||||||
|
<darenItem style="margin-right:23rpx"></darenItem>
|
||||||
|
<darenItem></darenItem>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: "2"
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onLoad() {},
|
|
||||||
methods: {}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content {
|
.index{
|
||||||
|
width: 750rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
height: 100vh;
|
||||||
justify-content: center;
|
.top{
|
||||||
}
|
padding: 0 30rpx;
|
||||||
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
flex-shrink: 0;
|
||||||
|
.sosuo{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
}
|
}
|
||||||
|
.tabs{
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 200rpx;
|
|
||||||
width: 200rpx;
|
|
||||||
margin-top: 200rpx;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.text-area {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
width: 294upx;
|
||||||
}
|
justify-content: space-between;
|
||||||
|
>view{
|
||||||
.title {
|
font-size: 36upx;
|
||||||
font-size: 36rpx;
|
color: #333;
|
||||||
color: #8f8f94;
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
>view::before{
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #FF780F;
|
||||||
|
width: 0;
|
||||||
|
height: 4rpx;
|
||||||
|
bottom: -10rpx;
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.xuanzhong::before{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
.box{
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
.list{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tuijian{
|
||||||
|
width: 750rpx;
|
||||||
|
margin-left: -30rpx;
|
||||||
|
height: 400rpx;
|
||||||
|
background-color: #ececec;
|
||||||
|
padding: 30rpx;
|
||||||
|
.title{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>view{
|
||||||
|
width: 6rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-color: #FF780F;
|
||||||
|
}
|
||||||
|
>text{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: 30rpx;
|
||||||
|
margin-left: 14rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width: 14rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tuijianlist{
|
||||||
|
width: 100%;
|
||||||
|
height: 282rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
import videoItem from "@/components/index/video-item/index"
|
||||||
|
import zhiboItem from "@/components/index/zhibo-item/index"
|
||||||
|
import indexad from "@/components/index/ad/index"
|
||||||
|
import darenItem from "@/components/index/daren-item/index"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:"index",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components:{
|
||||||
|
videoItem,
|
||||||
|
zhiboItem,
|
||||||
|
indexad,
|
||||||
|
darenItem
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
352
static/css/normalize.css
vendored
Normal file
352
static/css/normalize.css
vendored
Normal file
@ -0,0 +1,352 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
view{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user