新版HTML报告页面
This commit is contained in:
qingxu fu committed
1 parent
ea28db855d
commit
4ad432e1da
7 files changed
+158
-53
No files matched your search
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script>
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Vue=e()}(this,(function(){"use strict";var t=Object.freeze({}),e=Array.isArray;function n(t){return null==t}function r(t){return null!=t}function o(t){return!0===t}function i(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function a(t){return"function"==typeof t}function s(t){return null!==t&&"object"==typeof t}var c=Object.prototype.toString;function u(t){return"[object Object]"===c.call(t)}function l(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function f(t){return r(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function d(t){return null==t?"":Array.isArray(t)||u(t)&&t.toString===c?JSON.stringify(t,null,2):String(t)}function p(t){var e=parseFloat(t);return isNaN(e)?t:e}function v(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o<r.length;o++)n[r[o]]=!0;return e?function(t){return n[t.toLowerCase()]}:function(t){return n[t]}}var h=v("slot,component",!0),m=v("key,ref,slot,slot-scope,is");function g(t,e){var n=t.length;if(n){if(e===t[n-1])return void(t.length=n-1);var r=t.indexOf(e);if(r>-1)return t.splice(r,1)}}var y=Object.prototype.hasOwnProperty;function _(t,e){return y.call(t,e)}function b(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var $=/-(\w)/g,w=b((function(t){return t.replace($,(function(t,e){return e?e.toUpperCase():""}))})),x=b((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),C=/\B([A-Z])/g,k=b((function(t){return t.replace(C,"-$1").toLowerCase()}));var S=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n};function O(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function T(t,e){for(var n in e)t[n]=e[n];return t}function A(t){for(var e={},n=0;n<t.length;n++)t[n]&&T(e,t[n]);return e}function j(t,e,n){}var E=function(t,e,n){return!1},N=function(t){return t};function P(t,e){if(t===e)return!0;var n=s(t),r=s(e);if(!n||!r)return!n&&!r&&String(t)===String(e);try{var o=Array.isArray(t),i=Array.isArray(e);if(o&&i)return t.length===e.length&&t.every((function(t,n){return P(t,e[n])}));if(t instanceof Date&&e instanceof Date)return t.getTime()===e.getTime();if(o||i)return!1;var a=Object.keys(t),c=Object.keys(e);return a.length===c.length&&a.every((function(n){return P(t[n],e[n])}))}catch(t){return!1}}function D(t,e){for(var n=0;n<t.length;n++)if(P(t[n],e))return n;return-1}function M(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}}function I(t,e){return t===e?0===t&&1/t!=1/e:t==t||e==e}var L="data-server-rendered",R=["component","directive","filter"],F=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch","renderTracked","renderTriggered"],H={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:E,isReservedAttr:E,isUnknownElement:E,getTagNamespace:j,parsePlatformTagName:N,mustUseProp:E,async:!0,_lifecycleHooks:F},B=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function U(t){var e=(t+"").charCodeAt(0);return 36===e||95===e}function z(t,e,n,r){Object.defineProperty(t,e,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var V=new RegExp("[^".concat(B.source,".$_\\d]"));var K="__proto__"in{},J="undefined"!=typeof window,q=J&&window.navigator.userAgent.toLowerCase(),W=q&&/msie|trident/.test(q),Z=q&&q.indexOf("msie 9.0")>0,G=q&&q.indexOf("edge/")>0;q&&q.indexOf("android");var X=q&&/iphone|ipad|ipod|ios/.test(q);q&&/chrome\/\d+/.test(q),q&&/phantomjs/.test(q);var Y,Q=q&&q.match(/firefox\/(\d+)/),tt={}.watch,et=!1;if(J)try{var nt={};Object.defineProperty(nt,"passive",{get:function(){et=!0}}),window.addEventListener("test-passive",null,nt)}catch(t){}var rt=function(){return void 0===Y&&(Y=!J&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),Y},ot=J&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function it(t){return"function"==typeof t&&/native code/.test(t.toString())}var at,st="undefined"!=typeof Symbol&&it(Symbol)&&"undefined"!=typeof Reflect&&it(Reflect.ownKeys);at="undefined"!=typeof Set&&it(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var ct=null;function ut(t){void 0===t&&(t=null),t||ct&&ct._scope.off(),ct=t,t&&t._scope.on()}var lt=function(){functionLine truncated
|
||||
</script>
|
||||
<title>__TITLE__</title>
|
||||
<style>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
/* 更换卡片背景色 */
|
||||
.table-row {
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!-- 更换整体页面背景色 -->
|
||||
|
||||
<body style="padding: 0 200px;background-color: #f5f5f5;">
|
||||
<div id="app">
|
||||
<h1 style="padding-left: 20px;font-size: 40px;">文章目录</h1>
|
||||
|
||||
<ul>
|
||||
<li v-if="num == 1 || num == 0" v-for="(i,index) in contentList" :key="index"><a :href="`#${i.primary_col.header}`">{{ i.primary_col.header ? i.primary_col.header : '' }}</a></li>
|
||||
<li v-if="num == 2 " v-for="(i,index) in contentList" :key="index"><a :href="`#${i.secondary_rol.header}`">{{i.secondary_rol.header ?i.secondary_rol.header : '' }}</a></li </ul>
|
||||
<!-- 按钮的样式调整 -->
|
||||
<button style="cursor: pointer;cursor: pointer;height: 30px;" @click="showStatus">{{ text }}</button>
|
||||
<!-- border-radius调整圆角弧度 box-shadow调整阴影-->
|
||||
<div class="row table-row" v-for="(i,index) in contentList" :key="index" style="border-radius: 10px;background-color: rgb(255, 255, 255);margin: 40px 0px;padding: 20px 40px;position: relative;box-shadow: 0px 0px 15px -8px;">
|
||||
<div class="column table-cell" v-if="num == 1 || num == 0">
|
||||
<div class="markdown-body">
|
||||
<h1 :id="i.primary_col.header">{{ i.primary_col.header }}</h1>
|
||||
<div v-html="i.primary_col.msg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column table-cell" v-if="num == 2 || num == 0">
|
||||
<div class="markdown-body">
|
||||
<h1 :id="i.secondary_rol.header">{{ i.secondary_rol.header }}</h1>
|
||||
<div v-html="i.secondary_rol.msg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
// 添加内容的数组，示例请看数组底部
|
||||
contentList: [
|
||||
__TF_ARR__
|
||||
],
|
||||
// 控制状态切换的变量
|
||||
num: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
text() {
|
||||
// 对控制状态的变量进行判断处理
|
||||
switch (this.num) {
|
||||
case 0:
|
||||
return '切换英文' //0 -> 英文
|
||||
break;
|
||||
case 1:
|
||||
return '切换中文' // 1-> 中文
|
||||
break;
|
||||
default:
|
||||
return '展示全部' // 其他的 -> '全部'
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换状态的逻辑
|
||||
showStatus() {
|
||||
if (this.num >= 2) { //如果变量>=2 就将变量置回去
|
||||
this.num = 0
|
||||
} else {
|
||||
this.num++
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
Reference in new issue
Block a user