From 06ee76d0a83854ad7a044689627e0f00a66e5ce5 Mon Sep 17 00:00:00 2001
From: lijh <lijh>
Date: Wed, 19 Jan 2022 18:36:23 +0800
Subject: [PATCH] 表单校验
---
src/components/mini/box-friend.vue | 157 ++++++++++
src/components/mini/box10-add.vue | 40 ++
src/components/fixed/header.vue | 16
src/components/mini/box-new-article.vue | 386 +++++++++++++++++++++++++
src/components/swichLabel/main1-show.vue | 46 +-
src/components/swichLabel/main4-show.vue | 48 +++
src/config/router.config.js | 5
src/components/group/articleListScorll.vue | 5
src/components/group/tempBoxActicle.vue | 2
src/components/mini/tagInfo.vue | 4
src/components/group/tempFormCheck.vue | 183 +++++------
11 files changed, 753 insertions(+), 139 deletions(-)
diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue
index d235b19..8011ac1 100644
--- a/src/components/fixed/header.vue
+++ b/src/components/fixed/header.vue
@@ -9,9 +9,11 @@
<a-col v-bind="showSmall">
<router-link to="/main3">我的网盘 »</router-link>
</a-col>
+ <a-col v-bind="showSmall">
+ <router-link to="/main4">友人帐 »</router-link>
+ </a-col>
<a-col v-bind="showMain">
- <a-auto-complete ref="mySearch"
- v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
+ <a-auto-complete ref="mySearch" v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
<a-input @keydown.enter="onSelect">
<a-icon slot="suffix" type="search" class="certain-category-icon" />
</a-input>
@@ -73,11 +75,11 @@
},
showSmall: {
xs: 6,
- sm: 6,
- md: 6,
- lg: 6,
- xl: 6,
- xxl: 6,
+ sm: 4,
+ md: 4,
+ lg: 4,
+ xl: 4,
+ xxl: 4,
},
showMain: {
xs: 0,
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index d8e2c19..a0f173c 100644
--- a/src/components/group/articleListScorll.vue
+++ b/src/components/group/articleListScorll.vue
@@ -2,6 +2,7 @@
<div>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
<div v-for="temp in data">
+ <newArticle></newArticle>
<box5 v-bind="temp"></box5>
</div>
<div v-if="loading && !busy" class="demo-loading-container">
@@ -23,6 +24,7 @@
import infiniteScroll from 'vue-infinite-scroll';
import box5 from "../mini/box5-article.vue"
import babyActicle from '../../assets/baby.htm'
+ import newArticle from "../mini/box-new-article.vue"
import shijie from '../../assets/shijie.htm'
var obj1 = {
@@ -52,7 +54,8 @@
export default {
components: {
- box5
+ box5,
+ newArticle
},
directives: {
infiniteScroll
diff --git a/src/components/group/tempBoxActicle.vue b/src/components/group/tempBoxActicle.vue
index 9af73bb..d7b481d 100644
--- a/src/components/group/tempBoxActicle.vue
+++ b/src/components/group/tempBoxActicle.vue
@@ -89,7 +89,7 @@
}
.recent-post-item a {
- color: #99a9bf;
+ // color: #99a9bf;
text-decoration: none;
word-wrap: break-word;
-webkit-transition: all .2s;
diff --git a/src/components/group/tempFormCheck.vue b/src/components/group/tempFormCheck.vue
index 5876d7f..47c5ffa 100644
--- a/src/components/group/tempFormCheck.vue
+++ b/src/components/group/tempFormCheck.vue
@@ -1,59 +1,19 @@
<template>
- <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
- <a-form-model-item ref="name" label="Activity name" prop="name">
- <a-input v-model="form.name" @blur="
- () => {
- $refs.name.onFieldBlur();
- }
- " />
+ <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
+ <a-form-model-item has-feedback label="Password" prop="pass">
+ <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
</a-form-model-item>
- <a-form-model-item label="Activity zone" prop="region">
- <a-select v-model="form.region" placeholder="please select your zone">
- <a-select-option value="shanghai">
- Zone one
- </a-select-option>
- <a-select-option value="beijing">
- Zone two
- </a-select-option>
- </a-select>
+ <a-form-model-item has-feedback label="Confirm" prop="checkPass">
+ <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
</a-form-model-item>
- <a-form-model-item label="Activity time" required prop="date1">
- <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
- </a-form-model-item>
- <a-form-model-item label="Instant delivery" prop="delivery">
- <a-switch v-model="form.delivery" />
- </a-form-model-item>
- <a-form-model-item label="Activity type" prop="type">
- <a-checkbox-group v-model="form.type">
- <a-checkbox value="1" name="type">
- Online
- </a-checkbox>
- <a-checkbox value="2" name="type">
- Promotion
- </a-checkbox>
- <a-checkbox value="3" name="type">
- Offline
- </a-checkbox>
- </a-checkbox-group>
- </a-form-model-item>
- <a-form-model-item label="Resources" prop="resource">
- <a-radio-group v-model="form.resource">
- <a-radio value="1">
- Sponsor
- </a-radio>
- <a-radio value="2">
- Venue
- </a-radio>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="Activity form" prop="desc">
- <a-input v-model="form.desc" type="textarea" />
+ <a-form-model-item has-feedback label="Age" prop="age">
+ <a-input v-model.number="ruleForm.age" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
- <a-button type="primary" @click="onSubmit">
- Create
+ <a-button type="primary" @click="submitForm('ruleForm')">
+ Submit
</a-button>
- <a-button style="margin-left: 10px;" @click="resetForm">
+ <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
Reset
</a-button>
</a-form-model-item>
@@ -62,70 +22,89 @@
<script>
export default {
data() {
+ let checkPending;
+ let checkAge = (rule, value, callback) => {
+ clearTimeout(checkPending);
+ if (!value) {
+ return callback(new Error('Please input the age'));
+ }
+ checkPending = setTimeout(() => {
+ if (!Number.isInteger(value)) {
+ callback(new Error('Please input digits'));
+ } else {
+ if (value < 18) {
+ callback(new Error('Age must be greater than 18'));
+ } else {
+ callback();
+ }
+ }
+ }, 1000);
+ };
+ let validatePass = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('Please input the password'));
+ } else {
+ if (this.ruleForm.checkPass !== '') {
+ this.$refs.ruleForm.validateField('checkPass');
+ }
+ callback();
+ }
+ };
+ let validatePass2 = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('Please input the password again'));
+ } else if (value !== this.ruleForm.pass) {
+ callback(new Error("Two inputs don't match!"));
+ } else {
+ callback();
+ }
+ };
+
+ let validateContent = (rule, value, callback) => {
+ console.log(1111);
+ if (1 == 1) {
+ this.$refs.ruleForm.validateField('checkPass');
+ }
+ callback();
+ };
return {
- labelCol: {
- span: 4
- },
- wrapperCol: {
- span: 14
- },
- other: '',
- form: {
- name: '',
- region: undefined,
- date1: undefined,
- delivery: false,
- type: [],
- resource: '',
- desc: '',
+ ruleForm: {
+ pass: '',
+ checkPass: '',
+ age: '',
},
rules: {
- name: [{
- required: true,
- message: 'Please input Activity name',
- trigger: 'blur'
- },
- {
- min: 3,
- max: 5,
- message: 'Length should be 3 to 5',
- trigger: 'blur'
- },
- ],
- region: [{
- required: true,
- message: 'Please select Activity zone',
+ pass: [{
+ validator: validatePass,
trigger: 'change'
}],
- date1: [{
- required: true,
- message: 'Please pick a date',
+ checkPass: [{
+ validator: validatePass2,
trigger: 'change'
}],
- type: [{
- type: 'array',
- required: true,
- message: 'Please select at least one activity type',
- trigger: 'change',
- }, ],
- resource: [{
- required: true,
- message: 'Please select activity resource',
+ age: [{
+ validator: checkAge,
trigger: 'change'
- }, ],
- desc: [{
- required: true,
- message: 'Please input activity form',
- trigger: 'blur'
}],
+ common: [{
+ validator: validateContent,
+ trigger: 'change'
+ }],
+ },
+ layout: {
+ labelCol: {
+ span: 4
+ },
+ wrapperCol: {
+ span: 14
+ },
},
};
},
methods: {
- onSubmit() {
- this.$refs.ruleForm.validate(valid => {
+ submitForm(formName) {
+ this.$refs[formName].validate(valid => {
if (valid) {
- console.log('11');
alert('submit!');
} else {
console.log('error submit!!');
@@ -133,8 +112,8 @@
}
});
},
- resetForm() {
- this.$refs.ruleForm.resetFields();
+ resetForm(formName) {
+ this.$refs[formName].resetFields();
},
},
};
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
new file mode 100644
index 0000000..74aa7e3
--- /dev/null
+++ b/src/components/mini/box-friend.vue
@@ -0,0 +1,157 @@
+<template>
+ <div style="display: flex;" class="link-box">
+ <div v-for="temp in [1,2,1,1,1,1]">
+ <!-- <a href="#" target="_blank" class="no-underline"> -->
+ <a href="#" class="no-underline">
+ <div class="thumb">
+ <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
+ </div>
+ <div class="content">
+ <p class="title">
+ 长野 の BLOG
+ </p>
+ </div>
+ </a>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {}
+</script>
+
+</script>
+
+<style lang="less">
+ .myFriend {
+ a {
+ padding: 10px;
+ }
+ }
+
+ .link-box a {
+ width: 33.75rem;
+ background: #fff;
+ float: left;
+ margin: 0 0 4.375rem;
+ color: #2E2E2E;
+ text-decoration: none;
+ border-bottom: none;
+ border-radius: .25rem;
+ overflow: hidden;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
+ -moz-box-shadow: 0 3px 0.0625rem #0000001a;
+ box-shadow: 0 3px 0.0625rem #0000001a;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ -webkit-transition: .3s;
+ -moz-transition: .3s;
+ -ms-transition: .3s;
+ -o-transition: .3s;
+ transition: .3s;
+ }
+
+ .link-box a:hover:after {
+ left: 0;
+ width: 100%;
+ -webkit-transition: width 350ms;
+ -moz-transition: width 350ms;
+ -ms-transition: width 350ms;
+ -o-transition: width 350ms;
+ transition: width 350ms;
+ }
+
+ .link-box a .thumb {
+ font-size: 0;
+ overflow: hidden;
+ background-color: #fff;
+ margin: 0;
+ border-top-left-radius: .25rem;
+ border-top-right-radius: .25rem;
+ }
+
+ .link-box a .thumb img {
+ width: 100%;
+ height: auto;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ -webkit-transition: .4s;
+ -moz-transition: .4s;
+ -ms-transition: .4s;
+ -o-transition: .4s;
+ transition: .4s;
+ }
+
+ .link-box a .content {
+ text-align: center;
+ background-color: #fff;
+ }
+
+ .link-box a .content .title {
+ text-align: center;
+ padding: 1rem .25rem;
+ font-weight: 500;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
+ }
+
+ .link-box a:hover,
+ .link-box a:active {
+ -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
+ box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
+ -webkit-transform: translateY(-0.25rem);
+ -moz-transform: translateY(-0.25rem);
+ -ms-transform: translateY(-0.25rem);
+ -o-transform: translateY(-0.25rem);
+ transform: translateY(-0.25rem);
+ -moz-transform: none;
+ }
+
+ @media screen and (min-width: 1600px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(500% / 5 - 1.875rem);
+ width: calc(500% / 5 - 1.875rem);
+ }
+ }
+
+ @media screen and (max-width: 1599px) and (min-width: 768px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(150% / 4 - 1.875rem);
+ width: calc(150% / 4 - 1.875rem);
+ }
+ }
+
+
+
+ @media screen and (max-width: 500px) and (min-width: 319px) {
+ .link-box a {
+ margin: 0 0.75rem 1.5rem;
+ width: -webkit-calc(50% - 1.5rem);
+ width: calc(50% - 1.5rem);
+ }
+ }
+
+ @media screen and (max-width: 767px) and (min-width: 501px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(100% / 3 - 1.875rem);
+ width: calc(100% / 3 - 1.875rem);
+ }
+ }
+</style>
diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue
new file mode 100644
index 0000000..6f3fb0a
--- /dev/null
+++ b/src/components/mini/box-new-article.vue
@@ -0,0 +1,386 @@
+<template>
+ <div>
+ <div class="recent-posts" id="recent-posts" v-for="(item ,index) in [1,1,1]">
+ <div class="recent-post-item">
+
+ <div class="post_cover left_radius" v-if="index%2==0">
+ <router-link to="/mdDetail" :title="title">
+ <div class="block left_radius"></div>
+ <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg"
+ onerror="this.onerror=null,this.src="/img/404.jpg"" :alt="title">
+ </router-link>
+ </div>
+
+ <div class="post_cover right_radius" v-else>
+ <router-link to="/mdDetail" :title="title">
+ <div class="block right_radius"></div>
+ <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg"
+ onerror="this.onerror=null,this.src="/img/404.jpg"" :alt="title">
+ </router-link>
+ </div>
+
+ <div class="recent-post-info">
+ <router-link to="/mdDetail" class="article-title"> {{title}} </router-link>
+ <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
+ <div class="article-meta-wrap" style="display: flex;">
+ <span class="post-meta-date">
+ <a-icon type="calendar" />
+ <span class="article-meta-label"></span>
+ <time datetime="2022-01-13T06:25:00.000Z"
+ title=" 2022-01-13 14:25:00">{{publishTime}}</time>
+ </span>
+ <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
+ <span class="article-meta">
+ <a-icon type="book" />
+ <router-link to="/mdDetail" class="article-meta__categories"> {{tag}} </router-link>
+ <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
+ </span>
+ </div>
+ <div class="content">
+ {{content}}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ "title": "使用KeyStore生成证书",
+ "publishTime": "2022-01-14",
+ "tag": "随手记",
+ "content": "前言Keytool是一个Java数据证书的管理工具 ， 在keystore里，包含两种数据： 密钥实体（Key entity）：即密钥（secret key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实体（trusted certificate entries）：即证书（包含公钥） keytool常用命令: genkey 在用户主目录中创建一个默认文件”.keystore” alias 产生别名 keystore 指定密钥库的名称(产生的各类信息将不在.keystore文件中) keyalg 指定密钥的算法 (如 RSA DSA（如果不指定默认采用DSA）) validity 指定创建的证书有效期多少天 keysize 指定密钥长度 storepass 指定密钥库的密码(获取keystore信息所需的密码) keypass 指定别名条目的密码(私钥的密码) dname 指定证书拥有者信息 例如： “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码” list 显示密钥库中的证书信息 keytool - ..."
+ }
+ }
+ }
+</script>
+
+<style lang="less">
+ @card-bg: #f5f8fa;
+ @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
+ @ahzoo-proportion: 1;
+ @cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
+ @global-font-size: 14px;
+ @font-color: #666;
+ @title-clolr: dimgray;
+ @card-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
+
+
+ // #recent-posts>.recent-post-item:not(:first-child) {
+ // margin-top: 1rem;
+ // }
+ #recent-posts>.recent-post-item {
+ margin-top: 1rem;
+ }
+
+ #recent-posts>.recent-post-item {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: box;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -o-box-orient: horizontal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -o-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+ border-radius: 12px 8px 8px 12px;
+
+ -webkit-transition: all .3s;
+ -moz-transition: all .3s;
+ -o-transition: all .3s;
+ -ms-transition: all .3s;
+ transition: all .3s;
+
+ background: @card-bg;
+ -webkit-box-shadow: @card-box-shadow;
+ box-shadow: @card-box-shadow;
+
+ }
+
+ .recent-post-item a {
+ // color: #99a9bf;
+ text-decoration: none;
+ word-wrap: break-word;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ -ms-transition: all .2s;
+ transition: all .2s;
+ overflow-wrap: break-word;
+ background-color: transparent;
+ }
+
+ .recent-post-item {
+ padding-left: calc(1.2rem * @ahzoo-proportion) !important;
+ padding-right: calc(1.2rem * @ahzoo-proportion) !important;
+ // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+ line-height: 2;
+
+ img {
+ max-width: 100%;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ -ms-transition: all .2s;
+ transition: all .2s;
+ border-style: none;
+ }
+ }
+
+ .recent-post-item * {
+ cursor: url(@cursorURL), auto !important;
+ font-size: @global-font-size;
+ color: @font-color;
+ }
+
+ * {
+ tap-highlight-color: transparent;
+ -webkit-tap-highlight-color: transparent;
+ box-sizing: border-box;
+ }
+
+ #recent-posts>.recent-post-item .post_cover {
+ width: 33%;
+ position: sticky;
+
+ opacity: .8;
+ padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
+ overflow: hidden;
+ height: 100%;
+ -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
+ }
+
+ #recent-posts>.recent-post-item .left_radius {
+ border-radius: 8px 0 0 8px;
+ }
+
+ #recent-posts>.recent-post-item .right_radius {
+ -webkit-box-ordinal-group: 2;
+ -moz-box-ordinal-group: 2;
+ -o-box-ordinal-group: 2;
+ -ms-flex-order: 2;
+ -webkit-order: 2;
+ order: 2;
+ border-radius: 0 8px 8px 0;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+ border-bottom-left-radius: 0px;
+ }
+
+ .block.left_radius {
+ background: linear-gradient(to right, transparent, @card-bg 98%);
+ position: absolute;
+ width: 100%;
+ height: calc(100% - 2.2rem * @ahzoo-proportion);
+ z-index: 2;
+ top: calc(1.1rem * @ahzoo-proportion);
+ }
+
+ #recent-posts>.recent-post-item .post_cover img.post_bg {
+ border-radius: 15px;
+ width: 100%;
+ height: 100%;
+ -webkit-transition: all .6s;
+ -moz-transition: all .6s;
+ -o-transition: all .6s;
+ -ms-transition: all .6s;
+ transition: all .6s;
+ object-fit: cover;
+ }
+
+ .block.right_radius {
+ background: linear-gradient(to left, transparent, @card-bg 98%);
+ position: absolute;
+ width: 100%;
+ height: calc(100% - 2.2rem * @ahzoo-proportion);
+ z-index: 2;
+ top: calc(1.1rem * @ahzoo-proportion);
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info {
+ width: 77%;
+ padding: 0px calc(1.2rem * @ahzoo-proportion);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ a {
+ text-decoration: none;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ -ms-transition: all .2s;
+ transition: all .2s;
+ overflow-wrap: break-word;
+ }
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info>.article-title {
+ order: 1;
+ font-weight: 600;
+ color: @title-clolr;
+ font-size: 1.6em;
+ margin-bottom: 0.3rem;
+ line-height: 1.4;
+ -webkit-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ -ms-transition: all .2s ease-in-out;
+ transition: all .2s ease-in-out;
+
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-box-orient: vertical;
+ /* autoprefixer: off */
+ -webkit-line-clamp: 2;
+ /* autoprefixer: on */
+ }
+
+
+
+ #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
+ order: 3;
+ color: #858585;
+ font-size: 90%;
+
+ .article-meta-label {
+ padding-right: 0.2rem;
+ }
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info>.content {
+ opacity: 0;
+ line-height: .8;
+ transition: all .25s;
+ color: #999;
+ margin-bottom: 19px;
+ text-overflow: ellipsis;
+ order: 2;
+ margin: 0;
+
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-box-orient: vertical;
+ /* autoprefixer: off */
+ -webkit-line-clamp: 3;
+ /* autoprefixer: on */
+
+ }
+
+ #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
+ color: #448aff;
+ }
+
+
+
+ //div本体阴影
+ #recent-posts>.recent-post-item:hover {
+ -webkit-box-shadow: @card-hover-box-shadow;
+ box-shadow: @card-hover-box-shadow;
+ }
+
+ // 图片缩放
+ #recent-posts>.recent-post-item:hover img.post_bg {
+ -webkit-transform: scale(.9);
+ -moz-transform: scale(.9);
+ -o-transform: scale(.9);
+ -ms-transform: scale(.9);
+ transform: scale(.9);
+ -webkit-box-shadow: @card-hover-box-shadow;
+ box-shadow: @card-hover-box-shadow;
+ }
+
+ //内容缩放 内容显示
+ #recent-posts>.recent-post-item:hover .recent-post-info .content {
+ opacity: 1;
+ line-height: 1.8;
+ transition: all .25s;
+ }
+
+ #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
+ transform: scale(.9);
+ }
+
+ #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
+ -webkit-transform: scale(1.1);
+ -moz-transform: scale(1.1);
+ -o-transform: scale(1.1);
+ -ms-transform: scale(1.1);
+ transform: scale(1.1);
+ }
+
+ @media screen and (max-width:768px) {
+ #recent-posts .recent-post-item .recent-post-info .article-title {
+ font-size: 1.32em !important;
+ margin-bottom: 0 !important;
+ }
+ }
+
+ @media screen and (min-width: 769px) {
+ #recent-posts>.recent-post-item>.recent-post-info>.content {
+ opacity: 0;
+ line-height: .8;
+ transition: all .25s;
+ color: #999;
+ margin-bottom: 10px;
+ display: -webkit-container;
+ -webkit-line-clamp: 3;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ #recent-posts>.recent-post-item>.recent-post-info {
+ width: 69%;
+ font-size: 12px !important;
+ margin: .7rem 0;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ #recent-posts>.recent-post-item>.recent-post-info>.content {
+ opacity: 1;
+ line-height: 1.7;
+ color: #999;
+ display: -webkit-container;
+ -webkit-line-clamp: 3;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+
+ @media screen and (min-width: 769px) {
+ #recent-posts>.recent-post-item {
+ height: 15em;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ #recent-posts .recent-post-item {
+ height: 12em !important;
+ padding: 0;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+ }
+
+ @media only screen and (max-width: 768px) {
+ @ahzoo-proportion: 0.65;
+ @global-font-size: 12px;
+ }
+</style>
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index f9754d3..32c4409 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -5,7 +5,7 @@
<a-input v-model="form.title" placeholder="限 50字内" />
</a-form-model-item>
- <a-form-model-item label="模式切换">
+ <a-form-model-item label="模式切换" prop="common">
<a-switch v-model="form.online" />
<span class="myTip">
本地文件/由系统生成文件
@@ -101,9 +101,17 @@
</a-form-model-item>
<a-form-model-item label="定时">
- <a-date-picker v-model="form.publishDate" show-time type="<datetime></datetime>" placeholder="发布时间"
+ <a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
style="width: 100%;" :disabledDate="disabledDate"
:getCalendarContainer="getCalendarContainer()" />
+ </a-form-model-item>
+
+ <a-form-model-item label="置顶权重">
+ <a-slider v-model="form.sliderValue" :default-value="20" :step="5"
+ :getTooltipPopupContainer="getCalendarContainer()" />
+ <span class="myTip">
+ 越大越靠前
+ </span>
</a-form-model-item>
@@ -130,7 +138,7 @@
</a-form-model-item>
<a-form-model-item label="授权密码" v-show="form.auth=='password'">
- <a-input v-model="form.password" type="password" placeholder="Password">
+ <a-input v-model="form.password" type="password" placeholder="独立密码">
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-model-item>
@@ -148,6 +156,18 @@
import moment from "moment";
export default {
data() {
+
+ let validateContent = (rule, value, callback) => {
+ if (this.form.online) {
+ console.log("内容未填");
+ this.$refs.myForm.validateField('content')
+ } else {
+ console.log("文件未传");
+ this.$refs.myForm.validateField('blogFileList')
+ }
+ callback();
+ };
+
return {
blogFileList: [],
@@ -170,6 +190,7 @@
span: 13
},
form: {
+ online: false,
preference: false,
title: '',
content: '',
@@ -196,18 +217,21 @@
trigger: 'blur'
},
],
+ common: [{
+ validator: validateContent,
+ trigger: []
+ }],
content: [{
+ max: 10,
required: true,
- message: '至少选一个上传内容',
+ message: '至少填一下上传内容',
trigger: 'blur'
}, ],
blogFileList: [{
+ min: 1,
required: true,
message: '文件未上传',
- }, {
- min: 1,
- message: '文件未上传',
- }, ],
+ }],
class: [{
required: true,
message: '至少选一个分类',
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index 717949d..364c2a8 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -2,7 +2,7 @@
<div class="swichTag">
<a-page-header style="padding: 0px;" title=" " @back="() => this.$router.go(-1)">
</a-page-header>
- <a-divider :dashed="true" orientation="left">关于我的一些..小故事</a-divider>
+ <a-divider :dashed="true" orientation="left">关于我的一些..<span class="myTip">小故事</span></a-divider>
<a-timeline pending="...">
<p slot="pendingDot" style="font-size: 18px;" />
@@ -15,7 +15,7 @@
<li> 喜欢钢琴~喜欢吉他 </li>
<li> 爱音乐,也爱看番 </li>
<li> B界的白嫖怪</li>
- <li> PC单机的<span class="myTip">伪</span>硬核玩家 </li>
+ <li> PC单机的<!-- <span class="myTip">伪</span> --><span class="myTip" style="text-decoration:line-through">硬核</span>玩家 </li>
<li>
<img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;border-radius: 20px;" />
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 6af6b69..d9ab8d2 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -17,7 +17,7 @@
<div class="myModal">
<a-modal v-model="visible" title="日志添加" on-ok="handleOk">
<template slot="footer">
- <a-button key="reset" @click="reset" type="danger">
+ <a-button key="reset" @click="reset" type="danger">
擦掉重来
</a-button>
<a-button key="back" @click="handleCancel">
@@ -51,7 +51,6 @@
<a-icon type="plus-circle" style="margin-left: 0px;" />
</a-button>
<tempFriendBox></tempFriendBox>
- <tempBoxActicle></tempBoxActicle>
<router-view class="fade"></router-view>
</a-col>
@@ -66,27 +65,19 @@
<script>
import tempFriendBox from "../group/tempFriendBox.vue"
- import tempBoxActicle from "../group/tempBoxActicle.vue"
- import tempFormCheck from "../group/tempFormCheck.vue"
import box10 from "../mini/box10-add.vue"
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
- import articleList from "../group/articleList.vue"
import articleListScorll from "../group/articleListScorll.vue"
export default {
components: {
tempFriendBox,
- tempBoxActicle,
- tempFormCheck,
box10,
boxLeft,
boxRight,
- articleList,
articleListScorll,
-
-
},
methods: {
getCalendarContainer(trigger) {
@@ -97,7 +88,7 @@
},
handleOk(e) {
console.log(this.$refs.modalBox.form);
- var res=this.$refs.modalBox.$refs.myForm.validate(valid => {
+ var res = this.$refs.modalBox.$refs.myForm.validate(valid => {
if (valid) {
this.$message.info("校验通过")
} else {
@@ -105,9 +96,9 @@
return false;
}
});
-
-
- if(!res)return;
+
+
+ if (!res) return;
this.$message.info("提交表单")
@@ -118,7 +109,7 @@
}, 3000);
},
reset(e) {
- var res=this.$refs.modalBox.$refs.myForm.resetFields()
+ var res = this.$refs.modalBox.$refs.myForm.resetFields()
},
handleCancel(e) {
this.visible = false;
@@ -265,11 +256,14 @@
}
+ @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
+
/*---------------------
| 核心盒子构成start |
------- ---------------*/
.blog-container {
border-radius: 15px;
+ // background-color: #f5f8fa;
background-color: white;
line-height: 1.4;
@@ -289,9 +283,25 @@
padding-top: 10px;
padding-bottom: 20px;
overflow: hidden;
- -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
- box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
- // box-shadow: 1px 1px 1px 2px #00000059
+ // box-shadow: 1px 1px 1px 2px #00000059;
+
+ // -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+ // box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+
+ box-shadow: @card-box-shadow;
+ -webkit-box-shadow: @card-box-shadow;
+ transition: all .4s;
+ -webkit-transition: all .6s;
+ -moz-transition: all .6s;
+ -o-transition: all .6s;
+ -ms-transition: all .6s;
+ }
+
+ //div本体阴影
+ .blog-container:hover {
+ transition: all .25s;
+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
}
.show-line {
diff --git a/src/components/swichLabel/main4-show.vue b/src/components/swichLabel/main4-show.vue
new file mode 100644
index 0000000..a56705d
--- /dev/null
+++ b/src/components/swichLabel/main4-show.vue
@@ -0,0 +1,48 @@
+<template>
+ <div class="blog-main">
+ <a-row>
+ <a-col v-bind="colApiMain " class="holdHeight">
+ <a-page-header title="朋友们" style="padding: 0px;" @back="() => this.$router.go(-1)" />
+ <boxFriend></boxFriend>
+ </a-col>
+ </a-row>
+ </div>
+</template>
+
+<script>
+ import boxFriend from "../mini/box-friend.vue"
+ export default {
+ components: {
+ boxFriend,
+ },
+
+ data() {
+ return {
+ colApiMain: {
+ xs: 24,
+ sm: 24,
+ md: {
+ span: 24,
+ offset: 0,
+ },
+ lg: {
+ span: 20,
+ offset: 2,
+ },
+ xl: {
+ span: 20,
+ offset: 2,
+ },
+ xxl: {
+ span: 20,
+ offset: 2,
+ },
+ }
+ }
+ }
+ }
+</script>
+
+<style lang="less">
+
+</style>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index dadeddf..81c4de3 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -5,6 +5,7 @@
import main1 from '../components/swichLabel/main1-show.vue'
import main2 from '../components/swichLabel/main2-show.vue'
import main3 from '../components/swichLabel/main3-show.vue'
+import main4 from '../components/swichLabel/main4-show.vue'
import box1 from '../components/mini/box1-info.vue'
import tagTime from '../components/mini/tagTime.vue'
@@ -65,6 +66,10 @@
path: '/main3',
component: main3,
},
+ {
+ path: '/main4',
+ component: main4,
+ },
]
--
Gitblit v1.9.1