v
This commit is contained in:
zmr900709
commit
9bf8ed444f
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
.vscode
|
||||
node_modules
|
||||
5
App.vue
5
App.vue
@ -11,7 +11,6 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
<style lang="scss">
|
||||
@import "/static/css/normalize"
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
## 使用
|
||||
- scss
|
||||
- uniapp
|
||||
- 组建库待定
|
||||
- 组建库 [uview](http://www.uviewui.com/)
|
||||
## 目录结构
|
||||
```1=
|
||||
|-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 App from './App'
|
||||
|
||||
import uView from "uview-ui";
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(uView);
|
||||
App.mpType = 'app'
|
||||
|
||||
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 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{
|
||||
.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>
|
||||
@ -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"
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,58 +1,184 @@
|
||||
<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">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{title}}</text>
|
||||
</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>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "2"
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
.index{
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
height: 100vh;
|
||||
.top{
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
.sosuo{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
|
||||
.text-area {
|
||||
.tabs{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
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
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