Skip to content

B
beyond-clouds-front
Commit 4ef76bb6 by 高浩杰
Options

完成展示页

parent 2711fd9a
Showing with 1001 additions and 26 deletions
components/pc/answerCard.vue
<template>
<div class="answer-card__wrap">
<div class="answer-card__wrap" :style="{width: this.cardType === '1' ? '938px' : '816px'}">
<div class="answer-card">
<div class="answer-card__left" v-if="!isAnswer">
<div>
......@@ -44,6 +44,9 @@
<script>
export default {
name: "answerCard",
props: {
cardType: String
},
data() {
return{
isAnswer: true, // props 判断是否回答过
......@@ -59,10 +62,11 @@ export default {
.answer-card__wrap{
background-color: #fff;
.answer-card{
height: 132*$length;
@extend %cursorPointer;
width: 938*$length;
box-sizing: border-box;
padding: 24*$length;
margin: 0 24*$length;
padding: 24*$length 0;
border-bottom: 1px dashed #EFEFEF;
@extend %flex-row-spb;
align-items: flex-start;
......@@ -74,6 +78,7 @@ export default {
line-height: 84*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
text-align: center;
> div{
display: inline-block;
vertical-align: middle;
......@@ -95,6 +100,7 @@ export default {
background-color: #F4F8FA;
border: 1*$length solid #75D098;
@include border-radius(4*$length);
text-align: center;
> span{
@include fontStyle(12,17,500,#75D098,center);
}
......
components/pc/cardContainer.vue
......@@ -3,9 +3,9 @@
<div class="card-container__header">
<div class="header-left">
<div class="header-left__label"></div>
<span>{{title}}</span>
<p>{{title}}</p>
</div>
<div class="header-right">{{label}}</div>
<div class="header-right"><p>{{label}}</p></div>
</div>
<slot></slot>
<div class="card-container__footer" v-if="more">
......@@ -34,6 +34,7 @@ export default {
.card-container__header{
height: 56*$length;
border-bottom: 1*$length solid #EFEFEF;
vertical-align: middle;
@extend %flex-row-spb;
.header-left{
@extend %flex-row-spb;
......@@ -43,10 +44,9 @@ export default {
background-color: #00AAE6;
@include border-radius(2*$length);
}
> span{
> p{
margin-left: 12*$length;
@include fontStyle(16,22,500,#2F2F2F,left);
line-height: 18*$length;
}
}
.header-right{
......
pages/answer/index.vue 0 → 100644
<template>
<div class="answer-container">
<div class="answer-container__main">
<div class="answer-container__left">
<nav-wrap
width="106px"
height="480px"
:list="list"
></nav-wrap>
</div>
<div class="answer-container__center">
<card-container
width="816px"
height="1012px"
title="程序人生"
>
<answer-card card-type="2"></answer-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;"></pagination>
</div>
</div>
<div class="answer-container__right">
<div class="right__write-answer">我要提问</div>
<div class="right__search-answer">
<input type="text">
<div><yun-icon name="search" size="16px" color="#fff"></yun-icon></div>
</div>
<div class="right__my-answer">
<div class="my-answer__wrap">
<div class="my-answer__l">
<yun-icon name="star" color="#F8A06F" size="20px" style="margin-top: -5px"></yun-icon>
<p>我收藏的问题</p>
</div>
<p class="my-answer__r">12</p>
</div>
<div class="my-answer__wrap">
<div class="my-answer__l">
<yun-icon name="star" color="#F8A06F" size="20px" style="margin-top: -5px"></yun-icon>
<p>我收藏的问题</p>
</div>
<p class="my-answer__r">12</p>
</div>
<div class="my-answer__wrap">
<div class="my-answer__l">
<yun-icon name="star" color="#F8A06F" size="20px" style="margin-top: -5px"></yun-icon>
<p>我收藏的问题</p>
</div>
<p class="my-answer__r">12</p>
</div>
</div>
<card-container
title="热门答主"
label="换一换"
more="更多"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
import AnswerCard from "../../components/pc/answerCard";
export default {
components: {AnswerCard, Pagination, ProjectCard, CardContainer, NavWrap},
data(){
return{
list: [
{
label: '全部类型',
address: '/answer'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.answer-container{
> .answer-container__main{
width: $pageWidth;
margin: 0 auto;
padding-top: 16*$length;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
.answer-container__left{}
.answer-container__center{
.pagination{
margin: 32*$length;
}
}
.answer-container__right{
.right__write-answer{
width: 302*$length;
background-color: #fff;
@include fontStyle(14,56,500,#00AAE6,center);
@include border-radius(4*$length);
@extend %animate-transition;
&:hover {
color: #fff;
background-color: #00AAE6;
}
}
.right__search-answer{
width: 302*$length;
overflow: hidden;
margin-top: 16*$length;
@include border-radius(4*$length);
@extend %flex-row-spb;
> input {
@include fontStyle(12,16,500,#999,left);
width: 236*$length;
height: 56*$length;
padding: 20*$length 16*$length;
}
> div {
width: 66*$length;
height: 56*$length;
line-height: 50*$length;
text-align: center;
background-color: #00AAE6;
}
}
.right__my-answer{
height: 138*$length;
width: 302*$length;
overflow: hidden;
margin-top: 16*$length;
padding: 20*$length 16*$length;
box-sizing: border-box;
background-color: #fff;
@include border-radius(4*$length);
.my-answer__wrap{
@extend %flex-row-spb;
margin-bottom: 18*$length;
.my-answer__l{
@extend %flex-row-spb;
height: 20*$length;
line-height: 20*$length;
> p {
padding-left: 8*$length;
@include fontStyle(14,20,500,#666,left);
}
}
.my-answer__r{
@include fontStyle(14,16,500,#666,left);
}
}
}
}
}
}
</style>
pages/blog/index.vue 0 → 100644
<template>
<div class="blog-container">
<div class="blog-container__main">
<div class="blog-container__left">
<nav-wrap
width="106px"
height="480px"
:list="list"
></nav-wrap>
</div>
<div class="blog-container__center">
<card-container
width="816px"
height="1012px"
title="程序人生"
>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;"></pagination>
</div>
</div>
<div class="blog-container__right">
<div class="right__write-blog">写文章</div>
<card-container
title="热门博主"
label="换一换"
more="更多"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
<card-container
title="热门标签"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
export default {
components: {Pagination, ProjectCard, CardContainer, NavWrap},
data(){
return{
list: [
{
label: '全部类型',
address: '/blog'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.blog-container{
> .blog-container__main{
width: $pageWidth;
margin: 0 auto;
padding-top: 16*$length;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
.blog-container__left{}
.blog-container__center{
.pagination{
margin: 32*$length;
}
}
.blog-container__right{
.right__write-blog{
width: 302*$length;
background-color: #fff;
@include fontStyle(14,56,500,#00AAE6,center);
@include border-radius(4*$length);
@extend %animate-transition;
&:hover {
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
</style>
pages/news/index.vue 0 → 100644
<template>
<div class="news-container">
<div class="news-container__l">
<card-container
title="新闻速递"
width="938px"
height="1696px"
>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;"></pagination>
</div>
</div>
<div class="news-container__r">
<card-container
title="行业资讯"
label="换一换"
width="302px"
height="426px"
>
</card-container>
<card-container
style="margin-top: 16px"
title="招聘速递"
more="更多"
width="302px"
height="426px"
>
</card-container>
<card-container
style="margin-top: 16px"
title="每周软件推荐"
label="周一3:00更新"
more="更多项目"
width="302px"
height="426px"
>
</card-container>
<card-container
style="margin-top: 16px"
title="软件更新"
more="加载更多"
width="302px"
height="426px"
>
</card-container>
</div>
</div>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
export default {
components: {ProjectCard, CardContainer,Pagination}
}
</script>
<style lang="scss" scoped>
.news-container{
width: $pageWidth;
margin: 0 auto;
padding-top: 40*$length;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
.news-container__l{
.pagination{
margin: 32*$length;
}
}
}
</style>
pages/project/index.vue 0 → 100644
<template>
<div class="project-container">
<div class="project-container__main">
<div class="project-container__left">
<nav-wrap
width="106px"
height="480px"
:list="list"
></nav-wrap>
</div>
<div class="project-container__center">
<card-container
width="816px"
height="1012px"
title="人工智能"
>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
<project-card></project-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;"></pagination>
</div>
</div>
<div class="project-container__right">
<div class="right__write-project">发布项目</div>
<card-container
title="今日热门"
label="换一换"
more="加载更多"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
<card-container
title="热门项目"
label="整点更新"
more="更多项目"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
export default {
components: {Pagination, ProjectCard, CardContainer, NavWrap},
data(){
return{
list: [
{
label: '全部类型',
address: '/project'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.project-container{
> .project-container__main{
width: $pageWidth;
margin: 0 auto;
padding-top: 16*$length;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
.project-container__left{}
.project-container__center{
.pagination{
margin: 32*$length;
}
}
.project-container__right{
.right__write-project{
width: 302*$length;
background-color: #fff;
@include fontStyle(14,56,500,#00AAE6,center);
@include border-radius(4*$length);
@extend %animate-transition;
&:hover {
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
</style>
pages/topic/index.vue 0 → 100644
<template>
<div class="topic-container">
<div class="topic-container__main">
<div class="topic-container__left">
<nav-wrap
width="106px"
height="176px"
:list="list"
></nav-wrap>
</div>
<div class="topic-container__center">
<card-container
width="816px"
height="1070px"
title="热门话题"
>
<topic-card></topic-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;"></pagination>
</div>
</div>
<div class="topic-container__right">
<card-container
title="话题热搜榜"
label="实时更新"
more="更多"
width="302px"
height="430px"
></card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
import TopicCard from "../../components/pc/topicCard";
export default {
components: {TopicCard, Pagination, ProjectCard, CardContainer, NavWrap},
data(){
return{
list: [
{
label: '推荐',
address: '/topic'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.topic-container{
> .topic-container__main{
width: $pageWidth;
margin: 0 auto;
padding-top: 16*$length;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
.topic-container__left{}
.topic-container__center{
.pagination{
margin: 32*$length;
}
}
.topic-container__right{
.right__write-topic{
width: 302*$length;
background-color: #fff;
@include fontStyle(14,56,500,#00AAE6,center);
@include border-radius(4*$length);
@extend %animate-transition;
&:hover {
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
</style>
pages/web.vue
......@@ -17,21 +17,38 @@
<script>
import NavWrap from "../components/pc/nav/navWrap";
export default {
name: "web",
components: {
NavWrap
},
data(){
return{
data() {
return {
list: [
{
label:'关于我们',
address:'/web/about'
label: '关于我们',
address: '/web/about'
},
{
label: '联系我们',
address: '/web/contact'
},
{
label: '意见反馈',
address: '/web/feedback'
},
{
label:'联系我们',
address:'/web/contact'
label: '用户协议',
address: '/web/agreement'
},
{
label: '版权声明',
address: '/web/copyright'
},
{
label: '投诉举报',
address: '/web/report'
}
]
}
......@@ -40,11 +57,12 @@ export default {
</script>
<style lang="scss" scoped>
/deep/ .nuxt-link-exact-active{
/deep/ .nuxt-link-exact-active {
color: #00AAE6 !important;
}
.web-container{
.web-center{
.web-container {
.web-center {
width: $pageWidth;
margin: 16*$length auto 0;
@extend %flex-row-spb;
......
pages/web/about.vue
......@@ -3,12 +3,12 @@
title="关于我们"
width="938px"
height="400px"
style="margin-bottom: 356px"
style="margin-bottom: 100px"
>
<div class="about-container">
<p>云里云外开源社区</p>
<p style="text-indent:32px;">开源社区又称开放源代码社区。云里云外开源社区由云顶书院的程序员发起，致力于打造一个契合中国本土开发者的开源平台，为中国互联网行业的软件开源工作服务，促进互联网开发者的开源、共享、创新的精神，推动国产软件发展，为企业和高校提供大量精品项目和项目源代码，为新型互联网人才培育和互联网下新产业的发展打下坚实基础。</p>
<p style="text-indent:32px;">云里云外开源社区由开源社区和代码托管平台构成，开源社区致力于构建一个契合中国本土开发者的开发者交流社区，开发者们可以在社区里发布开源项目，检索开源项目，发布问答，回答问题等。代码托管平台致力于为开发者提供一个代码托管和团队高效协作的平台，开发者可以在此平台上创建项目和团队，开发者们可以在此平台上共同开发和维护开源项目。</p>
<div class="about-main">
<span>云里云外开源社区</span>
<p>开源社区又称开放源代码社区。云里云外开源社区由云顶书院的程序员发起，致力于打造一个契合中国本土开发者的开源平台，为中国互联网行业的软件开源工作服务，促进互联网开发者的开源、共享、创新的精神，推动国产软件发展，为企业和高校提供大量精品项目和项目源代码，为新型互联网人才培育和互联网下新产业的发展打下坚实基础。</p>
<p>云里云外开源社区由开源社区和代码托管平台构成，开源社区致力于构建一个契合中国本土开发者的开发者交流社区，开发者们可以在社区里发布开源项目，检索开源项目，发布问答，回答问题等。代码托管平台致力于为开发者提供一个代码托管和团队高效协作的平台，开发者可以在此平台上创建项目和团队，开发者们可以在此平台上共同开发和维护开源项目。</p>
</div>
</card-container>
</template>
......@@ -22,8 +22,12 @@ export default {
</script>
<style lang="scss" scoped>
.about-container{
.about-main{
padding: 24*$length;
@include fontStyle(16,30,500,#666,left);
height: auto;
> p{
text-indent: 32*$length;
}
}
</style>
pages/web/agreement.vue 0 → 100644
<template>
<card-container
title="用户协议"
width="938px"
height="922px"
style="margin-bottom: 100px"
>
<div class="agreement-main">
<p>真经发实民支素点严我口代组。南场千明统查无他速资积可便。把便分号权称且四下自期组素军。解反千干已度事复实两的军格列。</p>
<p>想近验统委实采须金火布理到。任非划步响五系东专例应反称先金。反龙工些于只相色身次共政元近。</p>
<p>见再办有还会验式后南极必。规但行加成国金进备在领子作。空保采走严志见据数石指向和查看。</p>
<p>加满被确员如气易管照维持出白思。往交题果什织关以党安她万所正史二最月。系通程被争色示感长料阶片该根保给四。保己们位物把确通住低始现律石。
也制在史长严世用活利最族空感际见。段事了先就并情如个万现形适却。更听集进来你心科多头各很。周公体深海须参做特上养由。向复线效速满意片量道类派相。二开情选教济公那再结性光运养引。
包律元天强满己九织个我北全属。院十局步格关万现毛来权委过报道个。型边更离上十前铁节别走照见员月再她。须给关质安群无照都行八资西美料。布志验及来交更可总关家能。
数水没形关场化些性和亲须使反听习。务就新回务林济做月越同根打般道通联。的论或易起离高什之长理人因。整花明除高深求回气产例多精厂。华运八回集当亲安本元已群难养正达就提。见长水段专院五度在系十但可义。
口气路现别特题干的角间期矿少内理老。军周利选原专品及四二满及毛声消离。明土属从看多角温先切对素。经解少称下如象总进许历明求回件指是。
引可么以属各外铁适质商别对先半人众。每者成热维经代还历劳织江当西压。八劳存及式动离影命满件立志。为己难就争入离次厂反形新线口什表去积。确转组交了总引取但重号产产调将物。满示特表力名济更者信党所历完。
中近天断义般数每又风是回当公维或统。厂段该期由支场老包与照米想亲传至名。听性说养约资水一候体世七议米务矿住。例公转劳采青听划斯始着十给高总水务近。律织资铁边听他万型年或美多。到边外争又利问备提确下今府拉且细。
向志带转阶取育期上起必委区。反面增集消式温回向量所儿不准九样相。光精业政深确西当极者候四。张务厂律儿铁北用分北率团命它单住位周。亲美据解积月内车连情学两用。
</p>
</div>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
export default {
name: "agreement",
components: {CardContainer}
}
</script>
<style lang="scss" scoped>
.agreement-main {
padding: 24*$length;
@include border-radius(46 $length);
> p {
@include fontStyle(16, 30, 500, #666, left);
height: auto;
}
}
</style>
pages/web/contact.vue
<template>
<h1>2334567890</h1>
<card-container
title="联系我们"
width="938px"
height="400px"
style="margin-bottom: 100px"
>
<div class="contact-main">
<p>Email：11111111@</p>
<p>QQ：1111111</p>
<p>微信：2222222</p>
<p>电话：0123-111111</p>
<p>工作时间：周一至周五 9:30-12:00 14:00-18:30</p>
<p>地址：山西省太原理工大学明向校区</p>
</div>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
export default {
name: "contact"
name: "contact",
components: {CardContainer}
}
</script>
<style scoped>
<style lang="scss" scoped>
.contact-main{
padding: 10*$length 24*$length;
> p{
@include fontStyle(16,45,500,#666,left);
@extend %cursorPointer;
}
}
</style>
pages/web/copyright.vue 0 → 100644
<template>
<card-container
title="版权声明"
width="938px"
height="612px"
style="margin-bottom: 100px"
>
<empty-card height="556px"></empty-card>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
import EmptyCard from "../../components/pc/emptyCard";
export default {
name: "copyright",
components: {EmptyCard, CardContainer}
}
</script>
<style lang="scss" scoped>
</style>
pages/web/feedback.vue 0 → 100644
<template>
<card-container
title="意见反馈"
width="938px"
height="552px"
style="margin-bottom: 100px"
>
<div class="feedback-container">
<div class="feedback-center">
<div class="feedback-container__header">
<div class="input-box">
<input type="radio" id="web-advice" value="网站建议" v-model="typePicked">
<label for="web-advice">网站建议</label>
</div>
<div class="input-box">
<input type="radio" id="function-advice" value="功能提议" v-model="typePicked">
<label for="function-advice">功能提议</label>
</div>
<div class="input-box">
<input type="radio" id="other" value="其它" v-model="typePicked">
<label for="other">其它</label>
</div>
</div>
<div class="feedback-container__main">
<textarea class="feedback-content" placeholder="我的反馈是..." v-model="feedbackContent"></textarea>
<div class="main-footer">
<input type="text" placeholder="联系方式" maxlength="18" v-model="contact">
<input type="text" placeholder="验证码" maxlength="6" v-model="verification">
<img :src="src" alt="">
</div>
</div>
<div class="feedback-container__submit">
<button>提交</button>
</div>
</div>
</div>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
export default {
name: "feedback",
components: {CardContainer},
data() {
return {
typePicked: '',
feedbackContent: '',
contact: '',
verification: '',
src: '//www.baidu.com/img/baidu_resultlogo@2.png'
}
}
}
</script>
<style lang="scss" scoped>
.feedback-container {
.feedback-center {
width: 726*$length;
margin: 38*$length auto;
.feedback-container__header {
@extend %flex-row-spb;
justify-content: flex-start;
.input-box {
margin-right: 40*$length;
input[type="radio"] {
display: none;
}
label {
@include fontStyle(14, 19, 500, #666, left);
vertical-align: middle;
}
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: baseline;
width: 16*$length;
height: 16*$length;
line-height: 16*$length;
margin-right: 8*$length;
border-radius: 50%;
border: 1*$length solid #F0F0F0;
background-color: #F4F5F5;
}
input[type="radio"]:checked + label::before {
display: inline-block;
vertical-align: baseline;
width: 10*$length;
height: 10*$length;
line-height: 10*$length;
margin-right: 8*$length;
border: 4*$length solid #75D098;
border-radius: 50%;
}
}
}
.feedback-container__main {
margin-top: 30*$length;
.feedback-content {
@include fontStyle(14,19,500,#666,left);
resize: none;
width: 726*$length;
height: 200*$length;
padding: 18*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
}
.main-footer{
margin-top: 24*$length;
@extend %flex-row-spb;
> input {
padding: 15*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
@include fontStyle(14,18,500,#999,left);
width: 242*$length;
height: 48*$length;
&:first-child {
width: 302*$length;
height: 48*$length;
}
}
> img {
width: 150*$length;
height: 48*$length;
}
}
}
.feedback-container__submit {
margin-top: 40*$length;
text-align: center;
> button {
@include fontStyle(14,19,500,#fff,center);
@include border-radius(4*$length);
@extend %cursorPointer;
display: inline-block;
width: 148*$length;
height: 48*$length;
background-color: #75D098;
border: none;
}
}
}
}
</style>
pages/web/report.vue 0 → 100644
<template>
<card-container
title="投诉举报"
width="938px"
height="612px"
style="margin-bottom: 100px"
>
<div class="report-container">
<div class="report-center">
<div class="report-container__header">
<div class="input-box">
<input type="radio" id="违法违禁" value="违法违禁" v-model="typePicked">
<label for="违法违禁">违法违禁</label>
</div>
<div class="input-box">
<input type="radio" id="政治敏感" value="政治敏感" v-model="typePicked">
<label for="政治敏感">政治敏感</label>
</div>
<div class="input-box">
<input type="radio" id="色情低俗" value="色情低俗" v-model="typePicked">
<label for="色情低俗">色情低俗</label>
</div>
<div class="input-box">
<input type="radio" id="垃圾广告" value="垃圾广告" v-model="typePicked">
<label for="垃圾广告">垃圾广告</label>
</div>
<div class="input-box">
<input type="radio" id="内容侵权" value="内容侵权" v-model="typePicked">
<label for="内容侵权">内容侵权</label>
</div>
<div class="input-box">
<input type="radio" id="other" value="其它" v-model="typePicked">
<label for="other">其它</label>
</div>
</div>
<div class="report-container__main">
<textarea class="report-header" placeholder="想要举报内容的链接" v-model="reportHeader"></textarea>
<textarea class="report-content" placeholder="请描述举报原因" v-model="reportContent"></textarea>
<div class="main-footer">
<input type="text" placeholder="联系方式" maxlength="18" v-model="contact">
<input type="text" placeholder="验证码" maxlength="6" v-model="verification">
<img :src="src" alt="">
</div>
</div>
<div class="report-container__submit">
<button>确定</button>
</div>
</div>
</div>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
export default {
name: "report",
components: {CardContainer},
data() {
return {
typePicked: '',
reportHeader: '',
reportContent: '',
contact: '',
verification: '',
src: '//www.baidu.com/img/baidu_resultlogo@2.png'
}
}
}
</script>
<style lang="scss" scoped>
.report-container {
.report-center {
width: 726*$length;
margin: 38*$length auto;
.report-container__header {
@extend %flex-row-spb;
justify-content: flex-start;
.input-box {
margin-right: 40*$length;
input[type="radio"] {
display: none;
}
label {
@include fontStyle(14, 19, 500, #666, left);
vertical-align: middle;
}
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: baseline;
width: 16*$length;
height: 16*$length;
line-height: 16*$length;
margin-right: 8*$length;
border-radius: 50%;
border: 1*$length solid #F0F0F0;
background-color: #F4F5F5;
}
input[type="radio"]:checked + label::before {
display: inline-block;
vertical-align: baseline;
width: 10*$length;
height: 10*$length;
line-height: 10*$length;
margin-right: 8*$length;
border: 4*$length solid #75D098;
border-radius: 50%;
}
}
}
.report-container__main {
margin-top: 30*$length;
.report-header{
@include fontStyle(14,19,500,#666,left);
resize: none;
width: 726*$length;
height: 48*$length;
padding: 14*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
margin-bottom: 24*$length;
}
.report-content {
@include fontStyle(14,19,500,#666,left);
resize: none;
width: 726*$length;
height: 200*$length;
padding: 18*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
}
.main-footer{
margin-top: 24*$length;
@extend %flex-row-spb;
> input {
padding: 15*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
@include fontStyle(14,18,500,#999,left);
width: 242*$length;
height: 48*$length;
&:first-child {
width: 302*$length;
height: 48*$length;
}
}
> img {
width: 150*$length;
height: 48*$length;
}
}
}
.report-container__submit {
margin-top: 40*$length;
text-align: center;
> button {
@include fontStyle(14,19,500,#fff,center);
@include border-radius(4*$length);
@extend %cursorPointer;
display: inline-block;
width: 148*$length;
height: 48*$length;
background-color: #75D098;
border: none;
}
}
}
}
</style>
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