兰代清没头发

package-lock.json

@@ -21,6 +21,7 @@
         "node-polyfill-webpack-plugin": "^3.0.0",
         "qs": "^6.11.2",
         "vue": "^2.6.14",
+        "vue-iframe": "^0.0.0",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
       },
@@ -16193,6 +16194,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-iframe": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/vue-iframe/-/vue-iframe-0.0.0.tgz",
+      "integrity": "sha512-gH791EBUqJrsa5SuGhxeujyK4NFngJnuvpSJN0p5W5VoHmYkW35ZekOLlCZTN658VsXUYNGCPHlk9bzLtRyd7Q=="
+    },
     "node_modules/vue-loader": {
       "version": "17.3.1",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.3.1.tgz",
@@ -29712,6 +29718,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-iframe": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/vue-iframe/-/vue-iframe-0.0.0.tgz",
+      "integrity": "sha512-gH791EBUqJrsa5SuGhxeujyK4NFngJnuvpSJN0p5W5VoHmYkW35ZekOLlCZTN658VsXUYNGCPHlk9bzLtRyd7Q=="
+    },
     "vue-loader": {
       "version": "17.3.1",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.3.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "node-polyfill-webpack-plugin": "^3.0.0",
     "qs": "^6.11.2",
     "vue": "^2.6.14",
+    "vue-iframe": "^0.0.0",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

src/assets/css/home-style.css

@@ -7,6 +7,9 @@
 
 
 :root {
+    --table-bg-color: rgba(16, 18, 27, 0.39);
+    --table-bg-color-hover: rgb(16, 18, 27);
+    --table-border : #f6f6f6;
     --font-bg-theme-reverse:rgb(255 255 255 / 31%);
     --font-border: rgb(213, 79, 27);
     --theme-comment-color: rgba(178, 188, 250, 0.4);
@@ -29,10 +32,13 @@
 }
 
 .light-mode {
+    --table-border : #b9b9b9;
     --font-bg-theme-reverse:rgba(16 18 27 / 40%);
     --font-border: rgb(108, 155, 255);
     --theme-comment-color: rgba(201, 217, 255, 0.4);
     --theme-bg-color: rgb(255 255 255 / 31%);
+    --table-bg-color: rgba(174, 207, 255, 0.31);
+    --table-bg-color-hover: rgb(149, 189, 255);
     --theme-bg-color-deep: rgb(255 255 255 / 51%);
     --theme-color: #3c3a3a;
     --inactive-color: #333333;
@@ -1053,6 +1059,21 @@ body.light-mode .video-bg:before {
     flex-direction:column;
 }
 
+.ButtonBlock{
+      display: flex;
+      flex-wrap:nowrap;
+      flex-direction:row;
+      justify-content:space-around;
+  }
+
+.MyButton{
+
+}
+.MyButton:hover{
+    transform:scale(1.08);
+    cursor: pointer;
+}
+
 
 
 

src/assets/img/DeleteButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" zoomAndPan="magnify" viewBox="0 0 60 30.000001" height="40" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><filter x="0%" y="0%" width="100%" height="100%" id="be9ed5facf"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/></filter><filter x="0%" y="0%" width="100%" height="100%" id="433f37944a"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0" color-interpolation-filters="sRGB"/></filter><g/><clipPath id="8c0991ba84"><path d="M 1 3.230469 L 57.683594 3.230469 L 57.683594 25.914062 L 1 25.914062 Z M 1 3.230469 " clip-rule="nonzero"/></clipPath><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAKJSURBVEiJrZbfS1NhGMe/O2xtbtOKLpIaWwpdyBZsQdiCQOkmRv+DQtgPIqFgkKhd2A+9Kza6iNFFN22sCFuNugjUZA3pZlQyHlAo2SQIkY6by6Y+XWzzPcdUfF3fm3Oe73nfDw+c932ex4ANWTva2xyN+yCpP0u57NT48kZsqL24ei40yMKESm8i3/VE8/VuEybHv+aWVmRh5kaHp+Msyk9D2q3OUaLh1r2niNZholGXiN0pip2sgwcAvhil3LXAlaawpU4gYA5Tupql5RWFtJ8OXH2Z/ZlPP+yUZYYoUUksSDGzxr+2wFUlj0tmGaUgADinyaexoyxUPi+H9NG0C8BdGtGYL1inU3LIYboH2DKkOTZX9ED+ZZQitlDGhgBFhNOwzszxB8zM/O1WiZmH5JKMUEDxY0IY3QYAszcGACweG1kDcPOQFHECfsTJK4z3zMx8B328bDbkmJm5S4ropbjRiTlhtAEABjCIxNp8MwDAvdXGbTUHp9GOgjD2Vx4DSj+4ah2UIhZgV3RGtXqoz60IV61VKSIApQC7iOYBAAuHM7Ph3v6KlZPC2VHQ/5nHzMyfFeSZh3BxhZn5jBTRS3GF4NEQAeCZKX8EGAw+KQD49FGK6AHpTzg+MHNxvXJfSszMfikgIhSALUMtwmnedAsj22/eSi2UsSnFJC4L68c53Yp3PXLES0gW/6lmp2dEho/keLVqhiBFtRXXeHtGVVVVXXwrW8RrFReWhL4r7FkhSlRbvitNYfPOi3chTecC3CmK+nZavQv5opruCrgS9U4A94kSlQxrU0pvlwmTY1/yalkWZmo6eqJTM6X8p0nq9+vNkxQAWDvb2xxNcq0KwKqay06NiWnvL72xRVTe8FxnAAAAAElFTkSuQmCC" id="d2864536fd" height="32" preserveAspectRatio="xMidYMid meet"/><mask id="f97e95528b"><g filter="url(#be9ed5facf)"><g filter="url(#433f37944a)" transform="matrix(0.700172, 0, 0, 0.708924, 0.967741, 3.230268)"><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAKJSURBVEiJrZbfS1NhGMe/O2xtbtOKLpIaWwpdyBZsQdiCQOkmRv+DQtgPIqFgkKhd2A+9Kza6iNFFN22sCFuNugjUZA3pZlQyHlAo2SQIkY6by6Y+XWzzPcdUfF3fm3Oe73nfDw+c932ex4ANWTva2xyN+yCpP0u57NT48kZsqL24ei40yMKESm8i3/VE8/VuEybHv+aWVmRh5kaHp+Msyk9D2q3OUaLh1r2niNZholGXiN0pip2sgwcAvhil3LXAlaawpU4gYA5Tupql5RWFtJ8OXH2Z/ZlPP+yUZYYoUUksSDGzxr+2wFUlj0tmGaUgADinyaexoyxUPi+H9NG0C8BdGtGYL1inU3LIYboH2DKkOTZX9ED+ZZQitlDGhgBFhNOwzszxB8zM/O1WiZmH5JKMUEDxY0IY3QYAszcGACweG1kDcPOQFHECfsTJK4z3zMx8B328bDbkmJm5S4ropbjRiTlhtAEABjCIxNp8MwDAvdXGbTUHp9GOgjD2Vx4DSj+4ah2UIhZgV3RGtXqoz60IV61VKSIApQC7iOYBAAuHM7Ph3v6KlZPC2VHQ/5nHzMyfFeSZh3BxhZn5jBTRS3GF4NEQAeCZKX8EGAw+KQD49FGK6AHpTzg+MHNxvXJfSszMfikgIhSALUMtwmnedAsj22/eSi2UsSnFJC4L68c53Yp3PXLES0gW/6lmp2dEho/keLVqhiBFtRXXeHtGVVVVXXwrW8RrFReWhL4r7FkhSlRbvitNYfPOi3chTecC3CmK+nZavQv5opruCrgS9U4A94kSlQxrU0pvlwmTY1/yalkWZmo6eqJTM6X8p0nq9+vNkxQAWDvb2xxNcq0KwKqay06NiWnvL72xRVTe8FxnAAAAAElFTkSuQmCC" height="32" preserveAspectRatio="xMidYMid meet"/></g></g></mask><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAIAAADlkwMFAAAABmJLR0QA/wD/AP+gvaeTAAAFF0lEQVRYhd1ZTW8bVRQ9586MO3bclm4rFalQV/wAfkC32VZCSpwGZcWPYoXUlKaKxJIsu67EHoSbsACxQy6QeJzMvHtYvLHrxOPQlhIbzi7P707ueffdz0c04ajfF8Akydvt4vjYSZMEQALZKLJMSCAJRD3b3e64KBQCgY++/np++0UCg/V15DnT1LLMSblzBUleCkk0M8nLUlWF8bh3cDC7wWb/ONzeZreL8RhZ5gAkkgQkORAkDYcqyytl8HdQWWo4DJJHtgBJSA4gTTEec23tqN+fFXltw8HmJs1ophDqz5GSGC81gLJECJw7tuVisL6uPEeSIMsiGZEko9oADIjH0Xv6NK7UnI/6fZcE0AyRpBnco9z9Jq9YTfzY7wOgBIlmABA9FDAyujcB/LSz42XJeB8AAEmrFapKQG93d/67P+3sKAS5Kx7KnMffW/YZDTY2UJYYjXjrVlwxAGZM07tffWUAvKosyzxeBhLuHkKSpo2EB1tboaqYJJjsnw9xL/v9w/MudMXo7e1hNEKe6/Q0JhoBTFOvKgA83N6GpBDq34ZDtNu9b75p/NbLfj8aFtIl0TyGPQD3Ji60LAwePkRR1NaWaEbJFFNuJOyOTgdF0SwfkzbASwkjBjwA5OHW1nul8PYoCnQ6co/6UBJgQYpLtQGzrDEsH25tvV2aJkmejEbPHzz455q/M3oHB8gymYkE4EAF2Nhsyllkb29vXvLnzz5jCHzL6kTSb8PhjevX34/674re3p7MgllUaZwk1g0hcpkmtHkEsywEzWyYeuwFXPjIndu3W9euff/55++NwTtBpIUAgGQ3BIs6RgKL8rCTZ1l2YSWKzS5mr16lf/45excIpJ2OuWOp+OTxY0qaFFc2rV1ssZ3d7MJvlEiK1OS+azj88Ntvy+vXZ3cKyEJYhXrdpKgqgTQmnnZZjt++l4g3XCTcfykKbm2h6eCWbmcA7t4O4TTLMO0Rfwd8sZ0x33/NrBsZ3O/cvt1IuHnxyuHS7wAASfY3e1FvXGQpB9qdTivLLuurV4P2FBaD9k3AFiutBVE9abUSs9HJiburMY5jVQgbeRMAQLLuooosM1ts80mhNouP79+3EOQev0AsSF/SKtA2syKmHqkOyJT8kstJ6vyJUHr54kU56bTrRTTQ1mqMWXzSUb/OVTHx/LC93SxBMoRZc4mctmnntp2v1epOo6m2u0r8sL2tiWoE7DhJomaeJFyQVHq7u3RPqupKNX1/oORJAkDScZJYPpnyJSFQGmxsNIqZu0975jf6PwRAsrf0dnJjg+6Je9QnD8ESgEmC2CS6oywH6+vzknf393W+8LoEcQoHcvkDk/V1lCXdozMbkAJWD8Bi7DXDaIR2u1H+3tOnIIvR6Odff13YkLAOZCTvPXnyb1F5c7TbGI3qwZgEd8ZYe/jokaWpn53FFlrjMdznx8IRzx88uNntplnWyfNL6pCVsHCew4x5Hqc6rbKszO4+e1bPAFVV8NcRTMMhOh1kWWM7vfponAHSPQ3hzv7+4lmvOybe+9+a9dZ+d/msN2KwuUnS4sAEwGSmbzHWm52laZUkZZp++uWXS2CzAN998UVWVWkIraoyd5EOJDOdIxfN9COO+n0/O9PJCT/4YOqrddEinWbZSZ53iyI9X34tF1WSHLfba+PxtbLUZKxbQ9KrV1xbs1Zr9rHuf/hGByA2yYve6Jr5nHuL/eMPmXFyW1YWUUO6t2/cOC0KX/wW+xe27uxowEbnmAAAAABJRU5ErkJggg==" id="cf9e71ecef" height="32" preserveLine truncated

src/assets/img/EditButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" zoomAndPan="magnify" viewBox="0 0 60 30.000001" height="40" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><filter x="0%" y="0%" width="100%" height="100%" id="14488328da"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/></filter><filter x="0%" y="0%" width="100%" height="100%" id="658f38dfac"><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.2126 0.7152 0.0722 0 0" color-interpolation-filters="sRGB"/></filter><g/><clipPath id="efa149595d"><path d="M 1 3.121094 L 57 3.121094 L 57 25.59375 L 1 25.59375 Z M 1 3.121094 " clip-rule="nonzero"/></clipPath><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAJkSURBVEiJrZbNaxNRFMVPh8mHSVoQ3RkypptQE8FxYaxY2/ixsAj+AYIUJEEXuihk505pXSc704WCkqy0De3KRRtCGApCQk2sl25qGkWCCE3TqEnNc5FkZjJR6Us8q/vOm/lxBoZ77xBU2ab8Y85hMzhV3yttrq/V1PNQp5CCN47wwjR9X4597CZa7s+YkF7Ll/Z+8sIsw07f1AQazyP6V12LRPOj/UfE6DzRoqSdvRlKnB2ABwBygjLezkFSKGodEAhYoqS0U1qXKKJd3N6qtHTt6IbMx4xQshUsTAmL6sqso5tgzSt8KeMUBgBXgXRZUirxEhhjd7iQMhUkCAiJr7Oa6Ver4wCwwEXMvhJDgD1H+t/mq5pxA8cuB/g+G27K2TFNMb1XVonshVMURT4iYjQtjCP1l9tbO41GnZOYwrjgQd7gftvR6iYnMQ+P4ELR4MonFbWugU9FuAQHqgb3TPNC9o+PH0JVOIRed+kqzr/vFwkIVTiM3puLdX+uP5wDVaEIV4+fPle93h/RhaJA8PX4W2XM9kf0gQQFk0a74Nl+HO6POAkF9hy5dVaZsQ82PGSsUa/Xf7EKH9BNObuwv4KQznMAp2qzj/DZZDabX/JGDGJlH5C6utk2Y08ijLHdu8Fg8C1jXECZChIAhCmuddx7rEtfeICdjgtrUj8VFnYrmvJc8yxCyfbIlxSKWv798GESapML8GYozjmleiTHddMVkJJEc4NsAO45omQrYWdLeTAjIr367lOlwQszjZw4HZjAwbP2lvKfNqkfy08NmxQA2AL+MecI72TBQaW0ub6qtebf7pAROcO4m2gAAAAASUVORK5CYII=" id="965b0b6a1a" height="32" preserveAspectRatio="xMidYMid meet"/><mask id="396ea1dc73"><g filter="url(#14488328da)"><g filter="url(#658f38dfac)" transform="matrix(0.693538, 0, 0, 0.702207, 0.967741, 3.122781)"><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAAAAABPmsuOAAAAAmJLR0QA/4ePzL8AAAJkSURBVEiJrZbNaxNRFMVPh8mHSVoQ3RkypptQE8FxYaxY2/ixsAj+AYIUJEEXuihk505pXSc704WCkqy0De3KRRtCGApCQk2sl25qGkWCCE3TqEnNc5FkZjJR6Us8q/vOm/lxBoZ77xBU2ab8Y85hMzhV3yttrq/V1PNQp5CCN47wwjR9X4597CZa7s+YkF7Ll/Z+8sIsw07f1AQazyP6V12LRPOj/UfE6DzRoqSdvRlKnB2ABwBygjLezkFSKGodEAhYoqS0U1qXKKJd3N6qtHTt6IbMx4xQshUsTAmL6sqso5tgzSt8KeMUBgBXgXRZUirxEhhjd7iQMhUkCAiJr7Oa6Ver4wCwwEXMvhJDgD1H+t/mq5pxA8cuB/g+G27K2TFNMb1XVonshVMURT4iYjQtjCP1l9tbO41GnZOYwrjgQd7gftvR6iYnMQ+P4ELR4MonFbWugU9FuAQHqgb3TPNC9o+PH0JVOIRed+kqzr/vFwkIVTiM3puLdX+uP5wDVaEIV4+fPle93h/RhaJA8PX4W2XM9kf0gQQFk0a74Nl+HO6POAkF9hy5dVaZsQ82PGSsUa/Xf7EKH9BNObuwv4KQznMAp2qzj/DZZDabX/JGDGJlH5C6utk2Y08ijLHdu8Fg8C1jXECZChIAhCmuddx7rEtfeICdjgtrUj8VFnYrmvJc8yxCyfbIlxSKWv798GESapML8GYozjmleiTHddMVkJJEc4NsAO45omQrYWdLeTAjIr367lOlwQszjZw4HZjAwbP2lvKfNqkfy08NmxQA2AL+MecI72TBQaW0ub6qtebf7pAROcO4m2gAAAAASUVORK5CYII=" height="32" preserveAspectRatio="xMidYMid meet"/></g></g></mask><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAgCAIAAADlkwMFAAAABmJLR0QA/wD/AP+gvaeTAAAEwklEQVRYhdVZy24cRRQ951Z194wNNsoy4jPYYAchxC579kjOw174a7JIMETiK7wjKErsFRL8BCyQUBQjz0xXV93DoseJ7fgZY8/4aKTpblXdrtu36twXcRLWdsYESLJuOGlhkgjoxMFzA5KCU4NGqZUk4Pnq8IRxx+43t5UHXQleogIA6MMxcw8BLEDMtGyxrZ7cP6KCHb559GrUDVOcVKo8TJ9RBAGhIHXN2wHzkSkzB7M1bwdInVAIiOiNFAAFj22VFtLazvjIlHdXD1+3gFOSgf1zIYiFEkV36wIzY26OfbbZYnNbObaK8qrIjGK/5gMN5CAFwn681/RTpqtf2xmbABjpU2HmKKRo4NOvBjevzMdh49XEIVA0uaZbUjLAndPjTQDf/6oQE8xjT1NUaocxJot568vFwxIf7451GpEJhB9cGalnK4unDL12rO/uM8U4qtvPxhAJZABuJdc/f0MDEKwruQ6QAEHoQghdzvUxhdd39yHxtH1NAMHUiYGUxMe741OGXjuerSzGUZ0HnbVBkIBAlVwH6wDw0auRw4wOEkDzdpCb7um39YeCHu+MyPcb5kMQJpVeDgkJFH64d4K3uDFs/JJiW7XLEwCQigwmA2FwGAEYPS+k2FYnzhdwhsIAAH9HEL3CM3fosa3yQrKepIwwEbBSDEYIAuWmOp9Oy+fRtUS+V1OcvWt/cp+qszshQAiACi1Nmp65ogPgVYin17iKnQMQSAx99s782cqinF76O6VxExcW296XOWW6ql0Itoqfp6lvexPTFQX+L5DAaYzFhcXWnAJAQNTV/bAAK/yrnvS/mZ/nHj99PSSn9nQq9pGlo1zHyybm5w+6EQgugAgEDRQAZ0nVZc6e6+7KrQnOAKTKnAUAKOv9yd7SUqrixUWI9vfvLT8Js6fmiyFVcW9pCQCEj+RVUl2LbuxvlptbovV7WL/ipb29usuXmklX7Hx5L8V2MP/Wrru8tLcHAIT1Gacp1N3l+cYYUbxuY3W573XzqDu3aRGEURABQ/jISJEUPOc455Ujwgj2SZT1cYgAiQ9eXi4T2loZ/DOgRJyaYc4FHrwcS9Oo2EQb7U9jz4OM6MJoBt/9ke6M5lrbHjToIPYc7TdWD9uegSyApvXd/YtIubsyCJbujMqhlAJSH8nPF9Z390mFaa7IetgagwoAAoSZmOLm9vnL/nO3zeOiQ3TNgyIagEtumGvE5raYopkkgCgAg6yPwuAC4LI4qnPTnS6EB3/iUf8kTnNHAoeO94ytnpsujupp2u+qQAH2fHUIt9QN+yB0sjyWaeNFOsnaFHSJ1Mt8hm57c1sbL5JMk+UxAFCLNgyw56tDA1C8CjEVkQBBb0qcVHkhHTvbW6uDvtJ9MdsJ6r3DDLC+u58XUpxU3hSCBIo4VqpZ4Yxar9ElUqRuU633wcsxDaTs7Fpvj4evW8FFBGraDiCssFBuMIpmJNyarS/mhaIAPPpN5q0EubtIhwpCdUApVNEpNf0eazvj2Fk9qtulcV8kQ1/Wcihaw7YLnyIlaF6yYgCgoa6r8m+rhtlhB+eJgKvZG6aFlCs/3Kw7qUfXdB49394enQSe1aM7WZ/DvVi0LSSRhnltyBIUHKQEEs05vdj/AEKZkNcZzqScAAAAAElFTkSuQmCC" id="9f32076e55" height="32" preserveAspectRatio="xMidYMid meet"/></defs><g clip-path="url(#efa149595d)"><g mask="url(#396ea1dc73)"><g transform="matrix(0.693538, 0, 0, 0.702207, 0.967741, 3.122781)"><image x="0" y="0" width="81" xlink:href="data:image/png;base64,iLine truncated

src/components/detail/NavDetail.vue

@@ -6,9 +6,13 @@
         <div class="JustBack"
              style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
           <div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap">
-            <div class="card" style="width: 180px;height:180px;margin-top:50px;background-color: var( --theme-bg-color)"
+            <div class="card" style="width: 130px;height:130px;margin-top:50px;background-color: var( --theme-bg-color)"
                  @click="ToURL()">
-              <img :src="UrlObj.icon" style="width:100%;height:100%">
+              <div style="width:100%;height:100%">
+                <img v-if="UrlObj.icon != null " :src="UrlObj.icon" style="width:100%;height:100%">
+                <img v-else src="../../assets/logo.png" style="width:100%;height:100%">
+<!--                <iframe src="https://www.canva.cn/" style="width:100%;height:100%"></iframe>-->
+              </div>
             </div>
             <div id="IconGroup"
                  style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
@@ -39,7 +43,7 @@
               </div>
             </div>
           </div>
-          <div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
+          <div class="NavInfo" style="margin-top:35px;margin-left:50px;width:220px;">
             <span style="font-size:30px;font-family: STHupo">{{ UrlObj.name }}</span><br/>
             <div class="NavInfo">
               <span style="width:200px">创建时间：{{ Cdate }}</span><br/>
@@ -51,7 +55,7 @@
                               trigger="hover"
                               effect="dark" close-delay="2000">
                     <div class="MyPopover" slot="content">
-                      <span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
+                      <span style="font-size:12px !important;">【{{UrlObj.name}}】总浏览量</span><br/><br/>
                       <div style="width:100% ;text-align: center">{{ UrlObj.views }} 次</div>
                     </div>
                     <i class="el-icon-s-custom" id="little-Circle-content" style=" padding:5px;"></i>
@@ -62,7 +66,7 @@
                               trigger="hover"
                               effect="dark" close-delay="2000">
                     <div class="MyPopover" slot="content">
-                      <span style="font-size:12px !important;">【91视频网站】总星级</span><br/><br/>
+                      <span style="font-size:12px !important;">【{{UrlObj.name}}】总星级</span><br/><br/>
                       <div style="width:100% ;text-align: center;">
                         <span style="font-size:20px">★★★☆☆</span>
                         <br/>
@@ -95,7 +99,7 @@
               <div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
             </div>
             <div class="ArticleContent">
-              <div :v-if="UrlObj.desc == null" style="background-color: var(--theme-bg-color);
+              <div v-if="UrlObj.desc == null" style="background-color: var(--theme-bg-color);
               border-radius:5px;height:250px;margin-top:50px;text-align: center">
                 <el-empty description="描述文字" style="width:80%;height:250px;margin-left:50px;"></el-empty>
               </div>
@@ -140,7 +144,6 @@
         <RandomRecomment></RandomRecomment>
       </div>
     </div>
-
   </div>
 </template>
 <script>
@@ -190,6 +193,7 @@ export default {
     }
   },
   mounted() {
+
     this.GetAllComment();
     if(this.UrlId && this.UrlObj.icon){
       this.getQR(this.UrlId, this.UrlObj.icon);
@@ -203,10 +207,17 @@ export default {
     if(this.UrlId){
       this.ViewByTime(this.UrlId)
     }
-
+    this.funFrame();
   },
   computed: {},
   methods: {
+    // 渲染iframe：
+    funFrame(){
+      var iframe = document.getElementById("myframe");
+      var url = this.UrlObj.url;
+      iframe.src = url;
+    },
+
     // 递归获取指定根目录下的所有评论：
     func0(commentId){
       var that = this;

src/components/setting/category/CategoryManage.vue

@@ -19,13 +19,52 @@
           <el-button type="success" plain size="medium" round style="margin-left:10px">查询目录</el-button>
         </el-col>
       </el-row>
-      <el-table style="margin-top:10px;width: 100%"
+      <el-table class="MyTable"
+                :data="List"
+                header-row-class-name="table_header_class"
                 border>
         <el-table-column
+            align="center"
+            type="index"
+            :index="hIndex"
             prop="date"
-            label="日期"
+            label="序号"
+            width="80">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            prop="name"
+            label="分类名称"
             width="180">
         </el-table-column>
+        <el-table-column
+            align="center"
+            prop="createtime"
+            label="创建时间"
+            width="200">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            prop="urlNumber"
+            label="包含网址数"
+            width="100">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            prop="weigh"
+            label="权重"
+            width="80">
+        </el-table-column>
+        <el-table-column prop="date" label="操作" width="150">
+          <template slot-scope="scope">
+            <div class="ButtonBlock">
+              <img class="MyButton" @click="handleEdit(scope.row)"
+                   src="../../../assets/img/EditButton.svg" style="width:60px">
+              <img class="MyButton" @click="handleDelete(scope.row)"
+                   src="../../../assets/img/DeleteButton.svg" style="width:60px">
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
 
 
@@ -35,21 +74,85 @@
   </div>
 </template>
 <script>
+import axios from "axios";
+import Vue from "vue";
 export default {
   name: "CategoryManage",
   data() {
     return {
       searchCate:'',
+      userId:null,
+      List:[],
+      form:{
+        name:'',
+        weigh:'',
+      }
     }
   },
   mounted() {
-
+    this.getFormatDate();
   },
   created() {
-
+    this.getUserInfo();
+    // this.GetData();
   },
   computed: {},
-  methods: {}
+  methods: {
+    // 时间转换：
+    getFormatDate() {
+      var that = this;
+      console.log(that.List.length + "changdu");
+      for(let i = 0 ; i < that.List.length; i++){
+        var date = new Date(that.List[i].createtime);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+        var Y = date.getFullYear() + '年';
+        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
+        var D = date.getDate() + '日 ';
+        console.log("date: " + Y + M + D);
+        that.List[i].createtime = "" + Y + M + D;
+      }
+    },
+    // 获取条数：
+    hIndex(index){
+      var linenum = parseInt( parseInt(index) + parseInt(1))
+      return linenum;
+    },
+    // 获取用户ID
+    getUserInfo() {
+      let _this = this;
+      if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
+        _this.userId = localStorage.getItem("userId")
+        _this.GetData();
+        } else {
+        Vue.prototype.$notify.error({
+          title: '错误',
+          message: "登录状态失效，请重新登录！",
+          offset: 0
+        });
+      }
+    },
+    GetData(){
+      // 获取数据
+      var that = this;
+      axios({
+        method:'post',
+        url:'/api/UrlAndCate/returnCateByUserId',
+        params:{
+          userId: that.userId
+        }
+      }).then(function(res){
+        that.List = res.data.data;
+        for(let i = 0 ; i < that.List.length; i++){
+          var date = new Date(that.List[i].createtime);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+          var Y = date.getFullYear() + '年';
+          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
+          var D = date.getDate() + '日 ';
+          that.List[i].createtime = "" + Y + M + D;
+        }
+      })
+      // /selectAllArticleByadmin
+    },
+
+  }
 
 }
 </script>
@@ -58,4 +161,34 @@ export default {
   display: flex;
   flex-direction: column;
 }
+/**表格样式，直接复制**/
+::v-deep .table_header_class th{
+  background-color: var(--table-bg-color)!important;
+  color:var(--theme-color);
+  text-align: center;
+}
+.MyTable{
+  margin-top:10px;
+  width: 100%;
+  background-color:var(--table-bg-color);
+  color:var(--theme-color);
+  border-radius: 5px;
+}
+
+::v-deep .el-table__body tr:hover > td {
+  background-color: var(--table-bg-color-hover) !important;
+}
+
+::v-deep .el-table tr,
+.el-table th.el-table__cell {
+  background-color: var(--table-bg-color);
+  border: var(--table-border) solid 3px;
+}
+
+::v-deep .el-table--border{
+  border: var(--table-border) solid 3px;
+}
+
+
+
 </style>