11 files modified
2 files added
1 files deleted
| | |
| | | cursor: move; |
| | | } |
| | | |
| | | @font-face { |
| | | font-family: 'HYTangMeiRen'; |
| | | // font-display: swap; |
| | | src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype"); |
| | | } |
| | | |
| | | span, |
| | | p, |
| | | a, |
| | | body, |
| | | h1, |
| | | h2, |
| | | h3, |
| | | h4, |
| | | h5, |
| | | h6, |
| | | code, |
| | | pre{ |
| | | font-family: HYTangMeiRen !important; |
| | | } |
| | | |
| | | #app { |
| | | // overflow: auto; |
| | | // border: none; |
New file |
| | |
| | | <template> |
| | | <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| | | <defs> |
| | | <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path> |
| | | <path |
| | | d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z" |
| | | id="pid-1-svgo-d"></path> |
| | | <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" |
| | | id="pid-1-svgo-c"> |
| | | <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> |
| | | <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"> |
| | | </feGaussianBlur> |
| | | <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" |
| | | result="shadowMatrixOuter1"></feColorMatrix> |
| | | <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset> |
| | | <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"> |
| | | </feGaussianBlur> |
| | | <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2" |
| | | result="shadowMatrixOuter2"></feColorMatrix> |
| | | <feMerge> |
| | | <feMergeNode in="shadowMatrixOuter1"></feMergeNode> |
| | | <feMergeNode in="shadowMatrixOuter2"></feMergeNode> |
| | | </feMerge> |
| | | </filter> |
| | | </defs> |
| | | <g fill="none" fill-rule="evenodd" opacity=".8"> |
| | | <mask id="pid-1-svgo-b" fill="#fff"> |
| | | <use xlink:href="#pid-1-svgo-a"></use> |
| | | </mask> |
| | | <g mask="url(#pid-1-svgo-b)"> |
| | | <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use> |
| | | <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use> |
| | | </g> |
| | | </g> |
| | | </svg> |
| | | </template> |
| | | |
| | | <script> |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |
| | |
| | | <template> |
| | | |
| | | <a-tabs :defaultActiveKey="activeKey" :tabBarStyle="{'display': 'flex','justify-content': 'center'}"> |
| | | <a-tab-pane key="1" tab="片刻"> |
| | | <a-tabs :defaultActiveKey="activeKey" @change="changeKey" |
| | | :tabBarStyle="{'display': 'flex','justify-content': 'center'}"> |
| | | <a-tab-pane :key="keyType.type_1" tab="片刻"> |
| | | <videoList v-on="$listeners" :activeKey="activeKey"></videoList> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="2" tab="流影"> |
| | | <photoShow :activeKey="activeKey"></photoShow> |
| | | <a-tab-pane :key="keyType.type_2" tab="流影"> |
| | | <videoList v-on="$listeners" :activeKey="activeKey"></videoList> |
| | | </a-tab-pane> |
| | | <a-tab-pane key="3" tab="谱库"> |
| | | <a-tab-pane :key="keyType.type_3" tab="谱库"> |
| | | <photoShow :activeKey="activeKey"></photoShow> |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | |
| | | <script> |
| | | import videoList from "../mini/box14-video.vue" |
| | | import photoShow from "../mini/box18-photoShow.vue" |
| | | import myConstant from "../../config/myConstant.js" |
| | | |
| | | export default { |
| | | components: { |
| | | videoList, |
| | | photoShow |
| | | photoShow, |
| | | }, |
| | | created() { |
| | | this.getActiveKey() |
| | |
| | | }, |
| | | methods: { |
| | | getActiveKey() { |
| | | if (this.$route.query.activeKey == "" || this.$route.query.activeKey == undefined) { |
| | | this.activeKey = this.defaultActiveKey; |
| | | } else { |
| | | if (this.$route.query.activeKey != "" && this.$route.query.activeKey != undefined) { |
| | | this.activeKey = this.$route.query.activeKey; |
| | | } else { |
| | | //随机三选一 |
| | | var random = Math.floor(Math.random() * 10); |
| | | this.activeKey = random >= 8 ? |
| | | this.keyType.type_3 : (random <= 3 ? this.keyType.type_2 : this.keyType.type_1) |
| | | } |
| | | this.$router.replace({query:{activeKey:this.activeKey}}) |
| | | }, |
| | | changeKey(key) { |
| | | this.activeKey = key |
| | | this.$router.replace({query:{activeKey:this.activeKey}}) |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | activeKey: "1", |
| | | defaultActiveKey: "1", |
| | | activeKey: "moment", |
| | | keyType: myConstant.activeKeyType |
| | | } |
| | | }, |
| | | |
| | |
| | | <div class="recent-post-item"> |
| | | <div class="miniTag" v-if="isTop==1">置顶</div> |
| | | <div class="post_cover left_radius" v-if="index%2==0"> |
| | | |
| | | <router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-if="articleFileType==myConstant.fileTypeVideo"> |
| | | <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </router-link> |
| | | <!-- <a :href="jumpURL" target="_blank" class="no-underline" |
| | | v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)"> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </a> --> |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-else> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </router-link> |
| | | </a> |
| | | </div> |
| | | |
| | | <div class="post_cover right_radius" v-else> |
| | | <router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-if="articleFileType==myConstant.fileTypeVideo"> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </router-link> |
| | | <!-- <a :href="jumpURL" target="_blank" class="no-underline" |
| | | v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)"> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </a> --> |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-else> |
| | | <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> |
| | | <div class="block right_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </router-link> |
| | | </a> |
| | | </div> |
| | | |
| | | <div class="recent-post-info"> |
| | | |
| | | <router-link :to="{path:'/videoDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" |
| | | class="article-title" v-if="articleFileType==myConstant.fileTypeVideo"> |
| | | <a @click="routerJump(id,articleFileType,typeId)" :title="title" class="article-title"> |
| | | <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" /> |
| | | <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" /> |
| | | {{title}} |
| | | <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge> |
| | | </router-link> |
| | | </a> |
| | | |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" |
| | | class="article-title" v-else> |
| | | <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" /> |
| | | <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" /> |
| | | {{title}} |
| | | <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge> |
| | | </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> {{publishDate}} </time> |
| | | <span class="article-meta__categories"> {{publishDate}} </span> |
| | | </span> |
| | | <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> |
| | | <span class="article-meta__separator" style="margin: 0px 5px ;">|</span> |
| | | |
| | | <span class="article-meta"> |
| | | <a-icon type="book" /> |
| | | <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}" |
| | | class="article-meta__categories"> {{articleTypeName}}</router-link> |
| | | <span v-if="articleFileType==myConstant.fileTypeShort"> |
| | | <span v-if="jumpURL !=null && jumpURL!=''"> |
| | | <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> |
| | | <span class="post-meta-date"> |
| | | <a-icon type="share-alt" /> |
| | | <a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a> |
| | | </span> |
| | | </span> |
| | | <a @click="routerToTypeList(articleTypeId)" class="article-meta__categories"> |
| | | {{articleTypeName}} |
| | | </a> |
| | | |
| | | <span v-else> |
| | | <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> |
| | | <span v-if="jumpURL !=null && jumpURL!=''"> |
| | | <span class="article-meta__separator" style="margin: 0px 3px 5px 0px ;">|</span> |
| | | <span class="post-meta-date"> |
| | | <a-icon type="share-alt" /> |
| | | <a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a> |
| | | </span> |
| | | </span> |
| | | <span v-else-if="articleFileType==fileType.fileTypeTalking_9"> |
| | | <span> |
| | | <span class="article-meta__separator" style="margin: 0px 3px 5px 0px ;">|</span> |
| | | <span class="post-meta-date"> |
| | | <a-icon type="thunderbolt" />碎碎念 |
| | | </span> |
| | | </span> |
| | | </span> |
| | | |
| | | <span v-if="articleFileType==myConstant.fileTypeVideo"> |
| | | <span v-if="articleFileType==fileType.fileTypeVideo_3"> |
| | | <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span> |
| | | <span class="post-meta-date"> |
| | | <a-icon type="video-camera" /> |
| | | <router-link :to="{path:'/videoDetail',query:{id:id}}"> |
| | | <a @click="routerToPlatform()"> |
| | | 视频 |
| | | </router-link> |
| | | </a> |
| | | </span> |
| | | </span> |
| | | <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> --> |
| | |
| | | |
| | | |
| | | export default { |
| | | methods: { |
| | | showMsg(articleFileType, jumpURL) { |
| | | if (articleFileType == myConstant.fileTypeShort && (jumpURL == null || jumpURL == "")) { |
| | | this.$message.info('这只是一句碎碎念,没有更多内容啦', 3); |
| | | return |
| | | } |
| | | } |
| | | }, |
| | | components: { |
| | | NotificationOutlined |
| | | }, |
| | | data() { |
| | | return { |
| | | fileType: myConstant.fileType, |
| | | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"", |
| | | } |
| | | }, |
| | | methods: { |
| | | routerJump(id, articleFileType, typeId) { |
| | | let routerName = "mdDetail"; |
| | | if (articleFileType == this.fileType.fileTypeVideo_3) { |
| | | routerName = "videoDetail"; |
| | | } |
| | | |
| | | this.$router.push({ |
| | | name: routerName, |
| | | query: { |
| | | id: id, |
| | | articleFileType: articleFileType, |
| | | typeId: typeId |
| | | }, |
| | | params: { |
| | | id: id, |
| | | articleFileType: articleFileType, |
| | | typeId: typeId |
| | | } |
| | | }) |
| | | }, |
| | | routerToPlatform() { |
| | | this.$router.push({ |
| | | name: "platformGroup" |
| | | }) |
| | | }, |
| | | routerToTypeList(typeId) { |
| | | this.$router.push({ |
| | | name: "articleList", |
| | | query: { |
| | | typeId: typeId, |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | props: { |
| | | "index": { |
| | |
| | | "jumpURL": { |
| | | default: "", |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | myConstant: myConstant, |
| | | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"", |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | a { |
| | | position: initial; |
| | | } |
| | | |
| | | img { |
| | | user-select: none; |
| | | } |
| | | } |
| | | |
| | | .miniTag { |
| | |
| | | <a-form-model-item label="日志文件" v-show="!form.online"> |
| | | <a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true" |
| | | @change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload" |
| | | :data="{'fileType':myConstant.fileTypeMarkDown}" accept=".md,.html,.htm,.txt"> |
| | | :data="{'bucketName':bucketName.bucket_article}" accept=".md,.html,.htm,.txt"> |
| | | <a-button> |
| | | <a-icon type="upload" />限 markdown/html |
| | | </a-button> |
| | |
| | | |
| | | <a-form-model-item label="封面"> |
| | | <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture" |
| | | :data="{'fileType':myConstant.fileTypeCover}" @change="handleChangeCoverFile" |
| | | :data="{'bucketName':bucketName.bucket_cover}" @change="handleChangeCoverFile" |
| | | :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover" |
| | | accept=".jpg,.png,.jpeg"> |
| | | <!-- :disabled="form.coverFileList.length>=1" --> |
| | |
| | | }; |
| | | |
| | | return { |
| | | myConstant: myConstant, |
| | | bucketName: myConstant.bucketName, |
| | | blogArticleType: [], |
| | | tags: [], |
| | | inputVisible: false, |
| | |
| | | customRequest(option) { |
| | | const formData = new FormData() |
| | | formData.append('file', option.file) |
| | | formData.append('fileType', option.data.fileType) |
| | | formData.append('bucketName', option.data.bucketName) |
| | | formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret)) |
| | | myFileInfoUpload(formData).then((res) => { |
| | | if (res.success) { |
| | |
| | | <a-icon type="delete" /> 空空如也.. |
| | | </p> |
| | | </div> |
| | | <div class="gridClass"> |
| | | <div class="entry-preview" v-for="item in data"> |
| | | <div class="thumbnail_box" @click="showMyVideo(item)"> |
| | | <div class="thumbnail"> |
| | | <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404"> |
| | | </div> |
| | | </div> |
| | | <div class="entry-post"> |
| | | <div class="entry-header"> |
| | | <h5 class="entry-title"> |
| | | <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title"> |
| | | {{item.title}} |
| | | </router-link> |
| | | <!-- {{item.title}} --> |
| | | </h5> |
| | | <div class="post_content"> |
| | | {{item.introduce}} |
| | | <div style="min-height: 600px;"> |
| | | <div class="gridClass"> |
| | | <div class="entry-preview" v-for="item in data"> |
| | | <div class="thumbnail_box" @click="showMyVideo(item)"> |
| | | <div class="thumbnail"> |
| | | <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404"> |
| | | </div> |
| | | </div> |
| | | <div class="entry-meta"> |
| | | <div class="post-categories"> |
| | | <span class="tag vcard"> |
| | | <a-icon type="customer-service" /> |
| | | <a href="#" rel="category tag"> {{item.articleTypeName}}</a> |
| | | </span> |
| | | <!-- <span class="tag-list"> |
| | | <div class="entry-post"> |
| | | <div class="entry-header"> |
| | | <h5 class="entry-title"> |
| | | <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title"> |
| | | {{item.title}} |
| | | </router-link> |
| | | <!-- {{item.title}} --> |
| | | </h5> |
| | | <div class="post_content"> |
| | | {{item.introduce}} |
| | | </div> |
| | | </div> |
| | | <div class="entry-meta"> |
| | | <div class="post-categories"> |
| | | <span class="tag vcard"> |
| | | <a-icon type="customer-service" /> |
| | | <a href="#" rel="category tag"> {{item.articleTypeName}}</a> |
| | | </span> |
| | | <!-- <span class="tag-list"> |
| | | <a href="#" rel="tag">影评</a> |
| | | <a href="#" rel="tag">电影</a> |
| | | <a href="#" rel="tag">蜘蛛侠</a> |
| | | </span> --> |
| | | </div> |
| | | <div class="post-on"> |
| | | <span class="entry-date"> |
| | | <a-icon type="calendar" /> |
| | | <a href="#" rel="bookmark"> |
| | | {{item.publishDate}} |
| | | </a> |
| | | </span> |
| | | </div> |
| | | <div class="post-on"> |
| | | <span class="entry-date"> |
| | | <a-icon type="calendar" /> |
| | | <a href="#" rel="bookmark"> |
| | | {{item.publishDate}} |
| | | </a> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | </div> |
| | | <a-row type="flex" justify="center"> |
| | | <div> |
| | |
| | | </template> |
| | | <script> |
| | | import { |
| | | queryBlogArticleList |
| | | platform |
| | | } from '../../api/blogArticle.js' |
| | | |
| | | import myConstant from "../../config/myConstant.js" |
| | |
| | | defaultPageSize: 6 |
| | | }, |
| | | data: [], |
| | | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"", |
| | | img404: myConstant.img404, |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | methods: { |
| | | onChange(current) { |
| | | this.page.current = current; |
| | | queryBlogArticleList({ |
| | | platform({ |
| | | pageNo: current, |
| | | pageSize: this.page.pageSize, |
| | | fileType: myConstant.fileTypeVideo |
| | | activeKey: this.$attrs.activeKey |
| | | }).then((res) => { |
| | | this.page.total = Number(res.data.total) |
| | | this.page.pageSize = Number(res.data.size); |
| | |
| | | grid-template-columns: repeat(2, 1fr); |
| | | } |
| | | } |
| | | |
| | | |
| | | @media screen and (max-width:767px) { |
| | | .gridClass { |
| | | grid-row-gap: 2rem; |
| | | grid-column-gap: 0rem; |
| | | grid-template-columns: repeat(1, 1fr); |
| | | |
| | | |
| | | .entry-preview { |
| | | display: block; |
| | | } |
| | | |
| | | |
| | | .thumbnail_box { |
| | | min-width: 100%; |
| | | } |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | loadFinish: false, |
| | | showBackButton: false, |
| | | articleId: "", |
| | | lastArticleId: "", |
| | |
| | | this.myLock = !this.myLock; |
| | | return |
| | | } |
| | | console.log(3333); |
| | | if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) { |
| | | this.$notification.error({ |
| | | message: '该日志还没有上传视频资源..', |
| | | placement: 'bottomRight' |
| | | }); |
| | | return |
| | | } |
| | | |
| | | this.isAllowedComment = res.data.isAllowedComment; |
| | | this.introduce = res.data.introduce; |
| | | |
| | | this.videoData.url = res.data.articleFileURL; |
| | | this.videoData.url = res.data.videoUrlList[0]; |
| | | |
| | | this.videoData.img = res.data.coverFileURL; |
| | | this.videoData.title = res.data.title; |
| | | this.videoData.introduce = res.data.introduce; |
| | |
| | | <template> |
| | | <div> |
| | | <div class="gridClass"> |
| | | <div class="entry-preview" v-for="item in data"> |
| | | <div class="thumbnail_box"> |
| | | <div class="thumbnail" @click="show(item.pictureUrlList)"> |
| | | <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404"> |
| | | </div> |
| | | </div> |
| | | <div class="entry-post"> |
| | | <div class="entry-header"> |
| | | <h5 class="entry-title"> |
| | | <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title"> |
| | | {{item.title}} |
| | | </router-link> |
| | | </h5> |
| | | <div class="post_content"> |
| | | {{item.introduce}} |
| | | <div style="min-height: 500px;"> |
| | | <div class="gridClass"> |
| | | <div class="entry-preview" v-for="item in data"> |
| | | <div class="thumbnail_box"> |
| | | <div class="thumbnail" @click="show(item.pictureUrlList)"> |
| | | <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404"> |
| | | </div> |
| | | </div> |
| | | <div class="entry-meta"> |
| | | <div class="post-categories"> |
| | | <span class="tag vcard"> |
| | | <a-icon type="customer-service" /> |
| | | <a href="#" rel="category tag"> {{item.articleTypeName}}</a> |
| | | </span> |
| | | <div class="entry-post"> |
| | | <div class="entry-header"> |
| | | <h5 class="entry-title"> |
| | | <router-link :to="{name:'mdDetail',query:{id:item.id,typeId:item.articleTypeId}}" :title="item.title"> |
| | | {{item.title}} |
| | | </router-link> |
| | | </h5> |
| | | <div class="post_content"> |
| | | {{item.introduce}} |
| | | </div> |
| | | </div> |
| | | <div class="post-on"> |
| | | <span class="entry-date"> |
| | | <a-icon type="calendar" /> |
| | | <a href="#" rel="bookmark"> |
| | | {{item.publishDate}} |
| | | </a> |
| | | </span> |
| | | <div class="entry-meta"> |
| | | <div class="post-categories"> |
| | | <span class="tag vcard"> |
| | | <a-icon type="customer-service" /> |
| | | <a href="#" rel="category tag"> {{item.articleTypeName}}</a> |
| | | </span> |
| | | </div> |
| | | <div class="post-on"> |
| | | <span class="entry-date"> |
| | | <a-icon type="calendar" /> |
| | | <a href="#" rel="bookmark"> |
| | | {{item.publishDate}} |
| | | </a> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | } from '../../api/blogArticle.js' |
| | | |
| | | import myConstant from "../../config/myConstant.js" |
| | | import optionsConfig from "../../config/v-viewer-Config.js" |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | options: { |
| | | 'inline': false, // 是否启用inline模式 |
| | | 'button': true, // 是否显示右上角关闭按钮 |
| | | 'navbar': true, // 是否显示缩略图底部导航栏 |
| | | 'title': false, // 是否显示当前图片标题,默认显示alt属性内容和尺寸 |
| | | 'toolbar': false, // 是否显示工具栏 |
| | | 'tooltip': true, // 放大或缩小图片时,是否显示缩放百分比,默认true |
| | | 'fullscreen': true, // 播放时是否全屏,默认true |
| | | 'loading': true, // 加载图片时是否显示loading图标,默认true |
| | | 'loop': true, // 是否可以循环查看图片,默认true |
| | | 'movable': true, // 是否可以拖得图片,默认true |
| | | 'zoomable': true, // 是否可以缩放图片,默认true |
| | | 'rotatable': true, // 是否可以旋转图片,默认true |
| | | 'scalable': true, // 是否可以翻转图片,默认true |
| | | 'toggleOnDblclick': true, // 放大或缩小图片时,是否可以双击还原,默认true |
| | | 'transition': true, // 使用 CSS3 过度,默认true |
| | | 'keyboard': true, // 是否支持键盘,默认true |
| | | 'zoomRatio': 0.1, // 鼠标滚动时的缩放比例,默认0.1 |
| | | 'minZoomRatio': 0.3, // 最小缩放比例,默认0.01 |
| | | 'maxZoomRatio': 2.0, // 最大缩放比例,默认100 |
| | | // 'url': 'data-source' // 设置大图片的 url |
| | | }, |
| | | options: optionsConfig, |
| | | page: { |
| | | size: "small", |
| | | total: 1, |
| | |
| | | defaultPageSize: 6 |
| | | }, |
| | | data: [], |
| | | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"", |
| | | img404: myConstant.img404, |
| | | } |
| | | }, |
| | | mounted() { |
| | |
| | | platform({ |
| | | pageNo: current, |
| | | pageSize: this.page.pageSize, |
| | | fileType: 9, |
| | | typeId: 99, |
| | | activeKey:this.$attrs.activeKey |
| | | activeKey: this.$attrs.activeKey |
| | | }).then((res) => { |
| | | this.page.total = Number(res.data.total) |
| | | this.page.pageSize = Number(res.data.size); |
| | |
| | | <template> |
| | | <div class="article-meta"> |
| | | <!-- <div> |
| | | <a-button @click="()=>this.$router.back(-1)" style="position: absolute;"> |
| | | <a-icon type="left" /> |
| | | </a-button> |
| | | </div> --> |
| | | |
| | | <div class="headertop filter-dot headertop-bar " v-if="coverURL.length>0"> |
| | | <figure class="centerbg" v-bind:style="{'background-image':'url('+this.coverURL+')'}"> |
| | |
| | | </div> |
| | | |
| | | <div v-if="showMsg && !myLock"> |
| | | <div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort"> |
| | | <div class="mySecretSamll" v-if="articleFileType==fileType.fileTypeTalking_9"> |
| | | <p>碎碎念只有那么一点了</p> |
| | | <p>但是下面依旧可以碎碎念</p> |
| | | </div> |
| | |
| | | <span class="myTip">{{errorMsg}}</span> |
| | | </div> |
| | | |
| | | <div class="mySecret" v-else-if="articleFileType==myConstant.fileTypeVideo |
| | | || articleFileType==myConstant.fileTypeMp3 |
| | | || articleFileType==myConstant.fileTypeShort"> |
| | | <div class="mySecret" v-else-if="articleFileType==fileType.fileTypeVideo_3 |
| | | || articleFileType==fileType.fileTypeVideo_3 |
| | | || articleFileType==fileType.fileTypeTalking_9"> |
| | | |
| | | <div class="mySecretSamll" v-if="introduce.length==0"> |
| | | <p>碎碎念只有那么一点了</p> |
| | | <p>碎碎念只有那么一点了22</p> |
| | | <p>但是下面依旧可以碎碎念</p> |
| | | </div> |
| | | <pre style="white-space: pre-line;"> |
| | | {{introduce}} |
| | | <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> |
| | | {{introduce}} |
| | | </pre> |
| | | </div> |
| | | <div v-viewer.static class="markdown-body article-detail" v-else> |
| | |
| | | import { |
| | | queryBlogArticleDetail |
| | | } from '../../api/blogArticle.js' |
| | | |
| | | import comment from "../mini/box12-comment.vue" |
| | | |
| | | import axios from 'axios' |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | myConstant: myConstant, |
| | | fileType: myConstant.fileType, |
| | | articelMeta: '', |
| | | isAllowedComment: 1, |
| | | introduce: "", |
| | | articleId: "", |
| | | articleFileType: myConstant.fileTypeMarkDown, |
| | | articleFileType: myConstant.fileType.fileTypeMarkDown_1, |
| | | typeId: null, |
| | | source: "", |
| | | showMsg: false, |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | console.log(111); |
| | | console.log(this.$route.params); |
| | | this.articleId = this.$route.query.id; |
| | | this.articleFileType = this.$route.query.articleFileType; |
| | | this.typeId = this.$route.query.typeId; |
| | |
| | | queryDetail() { |
| | | this.showMsg = true; |
| | | this.errorMsg = "加载中.."; |
| | | |
| | | // if (this.articleFileType == myConstant.fileTypeShort) { |
| | | // this.errorMsg = "该类型日志在这里没有更多啦.."; |
| | | // return |
| | | // } |
| | | |
| | | queryBlogArticleDetail({ |
| | | id: this.articleId, |
| | |
| | | |
| | | this.articelMeta = res.data; |
| | | |
| | | if (res.data.articleFileType == myConstant.fileTypeMarkDown || |
| | | res.data.articleFileType == myConstant.fileTypeHtml) { |
| | | if (res.data.articleFileType == this.fileType.fileTypeMarkDown_1 || |
| | | res.data.articleFileType == this.fileType.fileTypeHtml_2) { |
| | | if (res.data.articleFileURL != null && res.data.articleFileURL != '') { |
| | | this.$axios |
| | | .get(res.data.articleFileURL) |
| | |
| | | @import '../../assets/md.less'; |
| | | |
| | | .articleTitle { |
| | | h4{ |
| | | h4 { |
| | | margin: 0px 0px 20px 0px; |
| | | -webkit-line-clamp: 1; |
| | | } |
| | | |
| | | text-align: center; |
| | | width: 100%; |
| | | |
| | | |
| | | } |
| | | |
| | | .headertop { |
| | |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | @font-face { |
| | | font-family: 'HYTangMeiRen'; |
| | | // font-display: swap; |
| | | src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype"); |
| | | } |
| | | |
| | | span, |
| | | p, |
| | | a, |
| | | body, |
| | | h1, |
| | | h2, |
| | | h3, |
| | | h4, |
| | | h5, |
| | | h6, |
| | | code { |
| | | font-family: HYTangMeiRen !important; |
| | | } |
| | | |
| | | |
| | | .swichTag { |
| | | min-height: 750px; |
| | |
| | | //常量 |
| | | const myConstant = { |
| | | fileTypeMarkDown: 1, |
| | | fileTypeHtml: 2, |
| | | fileTypeVideo: 3, |
| | | fileTypeMp3: 4, |
| | | fileTypeShort: 5, |
| | | fileTypeCover: 9, |
| | | uploadFileSizeLimit: 2 * 1024 * 1024, |
| | | visitorDataKey: "visitorData.inleft.com", |
| | | userName:"inleft" |
| | | userName: "inleft", |
| | | img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"", |
| | | fileType: { |
| | | fileTypeMarkDown_1: 1, |
| | | fileTypeHtml_2: 2, |
| | | fileTypeVideo_3: 3, |
| | | fileTypeMp3_4: 4, |
| | | fileTypePictures_5: 5, |
| | | fileTypeTalking_9: 9, |
| | | }, |
| | | activeKeyType: { |
| | | type_1: "moment", |
| | | type_2: "flash", |
| | | type_3: "store", |
| | | }, |
| | | bucketName: { |
| | | bucket_article: "article", |
| | | bucket_video: "mp4", |
| | | bucket_mp3: "mp3", |
| | | bucket_cover: "cover", |
| | | bucket_picture: "picture", |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | |
| | | }] |
| | | }, |
| | | { |
| | | name: "platform", |
| | | path: '/platform', |
| | | component: platform, |
| | | children: [ |
New file |
| | |
| | | //v-viewer 配置项 |
| | | const options = { |
| | | 'inline': false, // 是否启用inline模式 |
| | | 'button': true, // 是否显示右上角关闭按钮 |
| | | 'navbar': true, // 是否显示缩略图底部导航栏 |
| | | 'title': false, // 是否显示当前图片标题,默认显示alt属性内容和尺寸 |
| | | 'toolbar': false, // 是否显示工具栏 |
| | | 'tooltip': true, // 放大或缩小图片时,是否显示缩放百分比,默认true |
| | | 'fullscreen': true, // 播放时是否全屏,默认true |
| | | 'loading': true, // 加载图片时是否显示loading图标,默认true |
| | | 'loop': true, // 是否可以循环查看图片,默认true |
| | | 'movable': true, // 是否可以拖得图片,默认true |
| | | 'zoomable': true, // 是否可以缩放图片,默认true |
| | | 'rotatable': true, // 是否可以旋转图片,默认true |
| | | 'scalable': true, // 是否可以翻转图片,默认true |
| | | 'toggleOnDblclick': true, // 放大或缩小图片时,是否可以双击还原,默认true |
| | | 'transition': true, // 使用 CSS3 过度,默认true |
| | | 'keyboard': true, // 是否支持键盘,默认true |
| | | 'zoomRatio': 0.1, // 鼠标滚动时的缩放比例,默认0.1 |
| | | 'minZoomRatio': 0.3, // 最小缩放比例,默认0.01 |
| | | 'maxZoomRatio': 2.0, // 最大缩放比例,默认100 |
| | | // 'url': 'data-source' // 设置大图片的 url |
| | | } |
| | | export default options; |