theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v

Browse Source
This commit is contained in:
zmr900709 2020-06-02 12:01:13 +08:00
commit 9bf8ed444f
15 changed files with 913 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1 +1,2 @@
.vscode
.vscode
node_modules

7
App.vue
View File

@ -11,7 +11,6 @@
}
}
</script>
<style>
/*每个页面公共css */
</style>
<style lang="scss">
@import "/static/css/normalize"
</style>

2
README.md
View File

@ -2,7 +2,7 @@
## 使用
- scss
- uniapp
- 组建库待定
- 组建库 [uview](http://www.uviewui.com/)
## 目录结构
```1=
|-pages tabes 目录

25
components/index/ad/index.vue Normal file
View 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
View 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
View 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
View 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>

6
main.js
View File

@ -1,11 +1,11 @@
import Vue from 'vue'
import App from './App'
import uView from "uview-ui";
Vue.config.productionTip = false
Vue.use(uView);
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
app.$mount()

13
package-lock.json generated Normal file
View 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
View 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"
}
}

126
pageA/login/login.vue
View File

@ -26,20 +26,58 @@
</view>
<!-- 注册 -->
<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 class="other">其他方式登录</text>
</view>
</view>
</view>
</template>
<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>
<style lang="scss" scoped>
.login{
<style lang="scss" scoped>
.login {
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
.images{
.images {
position: fixed;
width: 100%;
height: 100%;
@ -47,79 +85,93 @@
left: 0;
z-index: -1;
}
.backes{
background: rgba(0,0,0,0.1);
.backes {
background: rgba(0, 0, 0, 0.4);
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
text{
text {
z-index: 9;
color: #fff;
}
.more_Login{
.more_Login {
overflow: hidden;
zoom: 1;
width: 630rpx;
margin: 0 auto;
}
.more_Login text{
.more_Login text {
display: inline-block;
width: 50%;
float: left;
font-size:30rpx;
color:rgba(255,255,255,1);
line-height:36px;
font-size: 30rpx;
color: rgba(255, 255, 255, 1);
line-height: 36px;
margin: 97rpx 0;
}
.more_Login .other{
.more_Login .other {
text-align: right;
}
}
.title{
font-size:36rpx;
font-weight:bold;
.title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 150rpx;
color: #fff;
}
.content{
.content {
width: 630rpx;
z-index: 99999;
margin: 0 auto;
padding-top: 130rpx;
.labales text{
.labales text {
font-size: 30rpx;
}
.labales{
.labales {
border-bottom: 1px #fff solid;
margin-bottom: 90rpx;
}
.labales{
.labales {
position: relative;
}
.identifying{
.identifying {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size:30rpx;
font-weight:500;
color:rgba(255,120,15,1);
line-height:36px;
font-size: 30rpx;
font-weight: 500;
color: rgba(255, 120, 15, 1);
line-height: 36px;
}
}
.pact text{
font-size:22rpx;
font-weight:400;
color:rgba(255,255,255,1);
line-height:36px;
.pact text {
font-size: 22rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 36px;
}
.pact_text{
font-size:22px;
font-weight:400;
color:rgba(129,188,253,1)!important;
line-height:36px;
.pact_text {
font-size: 22px;
font-weight: 400;
color: rgba(129, 188, 253, 1) !important;
line-height: 36px;
}
</style>
</style>

4
pages.json
View File

@ -1,4 +1,7 @@
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pageA/welcome/welcome",
@ -9,6 +12,7 @@
"titleNView": false,
"animationType": "slide-in-bottom"
}
}
},
{

226
pages/index/index.vue
View File

@ -1,58 +1,184 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<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>
</view>
</template>
<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>
</scroll-view>
</swiper-item>
<swiper-item>
<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>
</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>
<script>
export default {
data() {
return {
title: "2"
};
},
onLoad() {},
methods: {}
};
</script>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<style lang="scss" scoped>
.content {
.index{
width: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
height: 100vh;
.top{
padding: 0 30rpx;
display: flex;
justify-content: space-between;
width: 100%;
height: 88rpx;
align-items: center;
flex-shrink: 0;
.sosuo{
width: 32rpx;
height: 32rpx;
}
.tabs{
display: flex;
width: 294upx;
justify-content: space-between;
>view{
font-size: 36upx;
color: #333;
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>
<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
View 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;
}

2
uni.scss
View File

@ -1,3 +1,5 @@
@import 'node_modules/uview-ui/theme.scss';
@import "uview-ui/index.scss";
/**
* 这里是uni-app内置的常用样式变量
*