适配移动端

test/src/assets/my-icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

test/src/assets/my-icon/demo_index.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3321146" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeae1;</span>
+                <div class="name">停止</div>
+                <div class="code-name">&amp;#xeae1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">重启</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67f;</span>
+                <div class="name">更多</div>
+                <div class="code-name">&amp;#xe67f;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1649732496628') format('woff2'),
+       url('iconfont.woff?t=1649732496628') format('woff'),
+       url('iconfont.ttf?t=1649732496628') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont my-icontingzhi"></span>
+            <div class="name">
+              停止
+            </div>
+            <div class="code-name">.my-icontingzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont my-iconzhongqi"></span>
+            <div class="name">
+              重启
+            </div>
+            <div class="code-name">.my-iconzhongqi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont my-icongengduo"></span>
+            <div class="name">
+              更多
+            </div>
+            <div class="code-name">.my-icongengduo
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont my-iconxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#my-icontingzhi"></use>
+                </svg>
+                <div class="name">停止</div>
+                <div class="code-name">#my-icontingzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#my-iconzhongqi"></use>
+                </svg>
+                <div class="name">重启</div>
+                <div class="code-name">#my-iconzhongqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#my-icongengduo"></use>
+                </svg>
+                <div class="name">更多</div>
+                <div class="code-name">#my-icongengduo</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

test/src/assets/my-icon/iconfont.css

@@ -0,0 +1,28 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3321146 */
+  src: url('iconfont.woff2?t=1649732496628') format('woff2'),
+       url('iconfont.woff?t=1649732496628') format('woff'),
+       url('iconfont.ttf?t=1649732496628') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 14px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-right: 5px;
+}
+
+.my-icontingzhi:before {
+  content: "\eae1";
+}
+
+.my-iconzhongqi:before {
+  content: "\e618";
+}
+
+.my-icongengduo:before {
+  content: "\e67f";
+}
+

test/src/assets/my-icon/iconfont.json

@@ -0,0 +1,30 @@
+{
+  "id": "3321146",
+  "name": "monitor",
+  "font_family": "iconfont",
+  "css_prefix_text": "my-icon",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "5387478",
+      "name": "停止",
+      "font_class": "tingzhi",
+      "unicode": "eae1",
+      "unicode_decimal": 60129
+    },
+    {
+      "icon_id": "10213488",
+      "name": "重启",
+      "font_class": "zhongqi",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "12672821",
+      "name": "更多",
+      "font_class": "gengduo",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    }
+  ]
+}

test/src/main.js

@@ -22,6 +22,10 @@ import 'element-ui/lib/theme-chalk/index.css'
 
 import 'normalize.css/normalize.css'
 
+import './assets/my-icon/iconfont.css'
+
+
+
 import http from './utils/axiosQuest'
 
 // 按需引入echarts

test/src/views/banMange/index.vue

@@ -6,9 +6,8 @@
       <span class="info">解封</span>
     </div>
 
-    <el-card>
-      <div class="right-bottom-inp">
-
+    <el-card class="search-card">
+      <div class="right-bottom-inp" >
         <div class="inp">
           <label for="inp2" style="background-color: #dcdfe6">编号</label>
           <el-input
@@ -25,9 +24,10 @@
 
         <div class="btn">
           <el-button size="mini" @click="handleReset">重置</el-button>
-          <el-button size="mini" type="primary"  @click="handleSearchs">查询</el-button>
+          <el-button size="mini" type="primary" @click="handleSearchs"
+            >查询</el-button
+          >
         </div>
-
       </div>
 
       <!-- 表格部分 -->
@@ -65,6 +65,7 @@
               <el-button
                 size="mini"
                 type="success"
+                :disabled="isDisabled"
                 @click="handleBan(scope.$index, scope.row)"
                 >解封</el-button
               >
@@ -86,204 +87,540 @@
         </el-pagination>
       </div>
     </el-card>
+
+
+      
+    <el-card class="data" v-for="(item, index) in phoneList" :key="index">
+      
+      <div class="container">
+        <span id="name">{{ item.device_id }}</span>
+        <el-button
+          size="small"
+          class="button"
+          icon="el-icon-circle-check"
+          @click="clickcard(item)"
+          >解封</el-button
+        >
+
+        <div class="bottom clearfix">
+          <div class="msg-info">{{ item.msg_info.split(":")[1] }}</div>
+          <div class="time-div">
+            <span id="runState-text"
+              >设备名称:<span id="runState">{{ item.device_name }}</span></span
+            >
+            <span id="time">{{ item.create_time }}</span>
+          </div>
+        </div>
+      </div>
+      
+    </el-card>
+
+    <el-card style="width:93%;margin:10px auto;" v-if="phoneList.length === 0 ? true : false">暂无数据</el-card>
+
+
+    <div class="load-bottom">
+      <div id="loadMore" @click="loadMore" v-show="isShow">加载更多...</div>
+      <div id="loadMore" @click="put" v-show="isPut">收起</div>
+    </div>
   </div>
 </template>
 
 <script>
-
 export default {
-  name: 'BanManage',
-  data () {
+  name: "BanManage",
+  data() {
     return {
-      // listQuery: Object.assign({}, defaultListQuery),
-      inp1: '',
-      inp2: '',
+      isDisabled: false,
+      i: 1, //点击加载更多的i
+      obj: {}, //存放更多操作的数据
+      isShow: true, //加载更多是否显示
+      isPut: false, //收起是否显示
+      inp1: "",
+      inp2: "",
+      phoneList: [], //手机样式表格的数据源
       list: [], // 表格的数据源
       page: 1, // 当前是第几页
       page_size: 10, // 每页显示多少条数据
       total: null, // 数据总条数,
-      device_name: '', // 设备名称
-      device_id: '', // 设备id
-      photo_num: '', // 拍照数量
-      msg_info: '', // 描述信息
-      create_time: ''// 封禁时间
-    }
+      device_name: "", // 设备名称
+      device_id: "", // 设备id
+      photo_num: "", // 拍照数量
+      msg_info: "", // 描述信息
+      create_time: "", // 封禁时间
+    };
   },
-  created () {},
-  mounted () {
-    this.getList()
+  created() {},
+  mounted() {
+    this.getList();
+    this.timer();
+    this.getPhoneList();
   },
   methods: {
-    async getList () {
-      const response = await this.$axios(`/api/photo/?page=${this.page}&size=10`, 'GET')
+    // 加载更多
+    async loadMore() {
+      this.i++;
+      this.isPut = true;
+      // console.log(this.i);
+      // 请求下所有数据，获取总数据量来判断是否显示记载更多
+      
+      
+
+      if(this.inp2!='') {
+        const res = await this.$axios(`/api/photo/?device_id=${this.inp2}`,"GET");
+        let total = res.result.paging.total;
+        const response = await this.$axios(`/api/photo/?device_id=${this.inp2}&page=${this.i}&size=10`,"GET");
+        // console.log(response);
+        this.phoneList = this.phoneList.concat(response.result.data)
+        if (this.i > total / 10) {
+          this.isShow = false;
+        }
+
+
+      }else {
+        const res = await this.$axios(`/api/photo/`, "GET");
+        // console.log(res);
+        // console.log(res.result.paging.total);
+        let total = res.result.paging.total;
+
+        const response = await this.$axios(`/api/photo/?page=${this.i}&size=10`,"GET");
+        // console.log(response.result.data);
+        this.phoneList = this.phoneList.concat(response.result.data);
+        // console.log(this.phoneList);
+        // console.log("---------------");
+        if (this.i > total / 10) {
+          this.isShow = false;
+        }
+      }
+    },
+    // 收起
+    async put() {
+      const response = await this.$axios(`/api/photo/?page=1&size=10`, "GET");
+      this.phoneList = [];
+      this.phoneList = this.phoneList.concat(response.result.data);
+      this.isPut = false;
+      this.isShow = true;
+      this.i = 1;
+      this.inp2 = ''
+    },
+    clickcard(item) {
+      // console.log(item)
+      this.obj = item;
+      // console.log(this.obj);
+
+      let  confirmText = ['确定解封'+this.obj.device_id+'吗?5秒后自动解封!请稍等!','注意:解封按钮3秒内只能点击一次!'] 
+        const newDatas = []
+        const h = this.$createElement
+        for (const i in confirmText) {
+          newDatas.push(h('p', null, confirmText[i]))
+        }
+
+      this.$confirm(
+        // `确定解封${this.obj.device_id}吗?5秒后自动解封!请稍等!
+        // 注意:解封按钮3秒内只能点击一次!`,
+        "提示",
+        {
+          title:'提示',
+          message:h('div',null,newDatas),
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "error",
+          center:true
+        }
+      )
+        .then(() => {
+          // 点击确定的操作(调用接口)
+          this.$axios("/api/photo/", "POST", {
+            device_id: this.obj.device_id,
+          }).then((data) => {
+            // console.log(data);
+            this.$message({
+              type: "success",
+              message: "已解封",
+            });
+            // 解封之后在刷新页面
+
+            this.getList();
+          });
+          // console.log(111);
+          this.getList();
+
+          // console.log('isClick');
+          this.isDisabled = true;
+          setTimeout(() => {
+            this.isDisabled = false;
+          }, 3000);
+        })
+        .catch(() => {
+          // 点取消的提示
+          this.$message({
+            type: "success",
+            message: "已取消解封",
+          });
+        });
+    },
+
+    timer() {
+      // setInterval(() => {
+      //   // console.log(11);s
+      //   this.getList();
+      // }, 5000);
+    },
+    // pc端获取表格数据
+    async getList() {
+      const response = await this.$axios(
+        `/api/photo/?page=${this.page}&size=10`,
+        "GET"
+      );
+      // console.log(response);
+      if (response.code === 0) {
+        this.page_size = 10;
+        this.list = response.result.data;
+        this.total = response.result.paging.total;
+      }
+    },
+    // 手机端获取数据
+    async getPhoneList() {
+      const response = await this.$axios(`/api/photo/?page=${this.page}&size=10`,"GET");
       // console.log(response);
       if (response.code === 0) {
-        this.page_size = 10
-        this.list = response.result.data
-        this.total = response.result.paging.total
+        this.page_size = 10;
+        this.phoneList = response.result.data;
+        this.total = response.result.paging.total;
+        let total = response.result.paging.total
+        // console.log(total);
+        if(total > 10) {
+          this.isShow = true
+        }else{
+          this.isShow = false
+        }
+       
+        
       }
+
     },
+
     // 解封操作
-    handleBan (index, row) {
-      this.$confirm(`确定解封 ${row.device_id} 吗?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'error'
-      })
+    handleBan(index, row) {
+      this.$confirm(
+        `确定解封${row.device_id}吗?5秒后自动解封!请稍等
+        注意:解封按钮3秒内只能点击一次!`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "error",
+        }
+      )
         .then(() => {
           // 点击确定的操作(调用接口)
-          this.$axios('/api/photo/', 'POST', {
-            device_id: row.device_id
+          this.$axios("/api/photo/", "POST", {
+            device_id: row.device_id,
           }).then((data) => {
             // console.log(data);
             this.$message({
-              type: 'success',
-              message: '已解封'
-            })
+              type: "success",
+              message: "已解封",
+            });
             // 解封之后在刷新页面
-            this.getList()
-          })
+
+            this.getList();
+          });
+          // console.log(111);
+          this.getList();
+
+          // console.log('isClick');
+          this.isDisabled = true;
+          setTimeout(() => {
+            this.isDisabled = false;
+          }, 3000);
         })
         .catch(() => {
           // 点取消的提示
           this.$message({
-            type: 'success',
-            message: '已取消解封'
-          })
-        })
+            type: "success",
+            message: "已取消解封",
+          });
+        });
     },
-    handleSearchs () {
-      this.page = 1
-      this.handleSearch()
+    handleSearchs() {
+      this.page = 1;
+      this.handleSearch();
     },
     // 查询
-    handleSearch () {
+     async handleSearch() {
+       let response = await this.$axios(`api/photo/?device_id=${this.inp2}`)
+      //  console.log(response);
+       
+       let total = response.result.paging.total
+      //  console.log(total);
+       if(total <=10) {
+         this.isShow = false
+       }else{
+         this.isShow = true
+       }
       // this.page = 1
+      this.$axios(`/api/photo/?device_id=${this.inp2}&page=${this.page}&size=10`,"GET").then((res) => {
+          
+          
+          // console.log(res)
+          this.list = [];
+          this.phoneList = [];
+          this.list = res.result.data;
+          this.phoneList = res.result.data;
 
-      this.$axios(`/api/photo/?device_id=${this.inp2}&page=${this.page}&size=10`, 'GET').then((res) => {
-        // console.log(res)
-        this.list = []
-        this.list = res.result.data
-        this.total = res.result.paging.total
-        // console.log(this.inp2)
-        this.device_id = this.inp2
-        this.inp2 = this.device_id
-        // console.log(this.device_id)
-      }).catch((err) => {
-        console.log(err)
-      })
+          this.total = res.result.paging.total;
+          // console.log(this.inp2)
+          this.device_id = this.inp2;
+          this.inp2 = this.device_id;
+          // console.log(this.device_id)
+        }).catch((err) => {
+          console.log(err);
+        });
     },
     // 重置
-    handleReset () {
-      this.inp2 = ''
-      this.getList()
+    handleReset() {
+      this.inp2 = "";
+      this.getList();
+      this.getPhoneList();
+      
     },
 
-    handleCurrentChange (val) {
-    // 当前页改变的时候触发
-      console.log(this.inp2)
+    handleCurrentChange(val) {
+      // 当前页改变的时候触发
+      // console.log(this.inp2)
 
-      this.inp2 = this.inp2.trim()
-      if (this.inp2 === '') {
-        this.page = val
-        console.log('getlist')
-        this.getList()
+      this.inp2 = this.inp2.trim();
+      if (this.inp2 === "") {
+        this.page = val;
+        // console.log('getlist')
+        this.getList();
       } else {
-        console.log('search')
-        console.log(this.device_id)
-        this.inp2 = this.device_id
-        this.page = val
-        this.handleSearch()
+        // console.log('search')
+        // console.log(this.device_id);
+        this.inp2 = this.device_id;
+        this.page = val;
+        this.handleSearch();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+// pc端样式
+@media screen and (min-width: 992px) {
+  .data,
+  .load-bottom {
+    display: none;
+  }
+  .right-top {
+    // width: 100%;
+    // width: calc(100vw - 146px);
+    background-color: rgb(240, 242, 245);
+
+    min-width: 1185px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: #1a2a35;
+    > img {
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+    .info {
+      color: #3eb984;
+    }
+  }
+
+  .right-bottom-inp {
+    display: flex;
+
+    .inp:nth-child(2) {
+      margin-left: 6px;
+    }
+    .inp {
+      width: 260px;
+      height: 28px;
+      font-size: 13px;
+      border-radius: 3px;
+      font-weight: 500;
+      color: #909399;
+      display: flex;
+      align-items: center;
+      margin-left: 22px;
+      label {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 88px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        border: 1px solid #dcdfe6;
+        border-radius: 3px 0px 0px 3px;
+        border-right: none;
       }
     }
+  }
+
+  .el-pagination {
+    text-align: center;
+    margin-top: 20px;
+  }
+  ::v-deep {
+    .el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: green;
+      color: #fff;
+    }
+    .el-input__inner {
+      border-radius: 0px !important;
+    }
+  }
 
+  .el-card {
+    // border: 1px solid red;
+    // height: 800px;
+    width: 93vw;
+    margin: 0 auto;
   }
 
+  .table-container {
+    // border: 1px solid red;
+    height: 680px;
+  }
+
+  .btn {
+    // border: 1px solid red;
+    margin-left: 10px;
+  }
 }
-</script>
 
-<style scoped lang="less">
-.right-top {
-  // width: 100%;
-  // width: calc(100vw - 146px);
-  background-color: rgb(240, 242, 245);
-
-  min-width: 1185px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  color: #1a2a35;
-  > img {
-    margin-left: 12px;
-    margin-right: 12px;
+// 手机样式
+@media screen and (min-width: 320px) and (max-width: 992px) {
+  .right-top {
+    // border: 1px solid blue;
+      display: none;
+    width: 93%;
+    height: 30px;
+    line-height: 30px;
+    margin: 0 auto;
+  }
+  .right-top img {
+  
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+    margin-top: -3px;
+  }
+
+  .right-top span:nth-of-type(1) {
+    margin-left: 5px;
   }
   .info {
     color: #3eb984;
   }
-}
 
-.right-bottom-inp {
-  display: flex;
+  .inp label {
+    display: none;
+  }
 
-  .inp:nth-child(2) {
-    margin-left: 6px;
+  .inp .el-input {
+    // border: 1px solid red;
+    width: 90%;
   }
-  .inp {
-    width: 260px;
-    height: 28px;
-    font-size: 13px;
-    border-radius: 3px;
-    font-weight: 500;
-    color: #909399;
+
+  .right-bottom-inp {
     display: flex;
-    align-items: center;
-    margin-left: 22px;
-    label {
-      display: inline-block;
-      box-sizing: border-box;
-      width: 88px;
-      height: 28px;
-      line-height: 28px;
-      text-align: center;
-      border: 1px solid #dcdfe6;
-      border-radius: 3px 0px 0px 3px;
-      border-right: none;
-    }
+    flex-direction: row;
+  }
 
+  .table-container {
+    display: none;
   }
-}
 
-.el-pagination {
-  text-align: center;
-  margin-top: 20px;
-}
-::v-deep {
-  .el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: green;
-    color: #fff;
+  .pagination-container {
+    display: none;
+  }
+
+  // 搜索栏卡片样式
+  .search-card {
+    width: 93%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+  .inp {
+    width: 50%;
+    // border: 1px solid red;
+    margin-right: 10%;
   }
-  .el-input__inner {
-    border-radius: 0px !important;
+  .search-card .el-input {
+    width: 100%;
+    // border: 1px solid green;
   }
-}
 
-.el-card {
-  // border: 1px solid red;
-  // height: 800px;
-  width: 93vw;
-  margin: 0 auto;
+  // 展示数据卡片
+  .data {
+    width: 93%;
+    margin: 0 auto;
+    margin-top: 5px;
+    position: relative;
+  }
 
-}
+  // 解封按钮
+  .button {
+    position: absolute;
+    top: 5%;
+    right: 0;
+    border: transparent;
+  }
 
-.table-container {
-  // border: 1px solid red;
-  height:680px;
-}
+  // 设备id
+  #name {
+    font-weight: 600;
+  }
 
-.btn {
-  // border: 1px solid red;
-  margin-left: 10px;
-}
+  .msg-info {
+    height: 40px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
 
+  // 设备名称
+  #runState-text {
+    color: #999;
+  }
+  #runState {
+    color: #666;
+  }
+
+  .load-bottom {
+    display: flex;
+    flex-direction: row;
+  }
+  #loadMore {
+    width: 30%;
+    // border: 1px solid red;
+    padding: 10px 0;
+    margin-top: 10px;
+    margin-left: 50px;
+    color: gray;
+    text-align: center;
+  }
+
+  .time-div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  #time {
+    color: #999;
+  }
+
+  ::v-deep {
+    .search-card .el-card__body {
+      padding: 10px;
+    }
+  }
+}
 </style>

test/src/views/layout/LayOut.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 整个页面的布局结构 -->
 
-<div>
+<div class="container">
     <!-- 头部区域 -->
     <NavBar></NavBar>
 
@@ -33,7 +33,7 @@ export default {
   methods: {}
 }
 </script>
-<style >
+<style scoped>
 
 /* .el-aside {
   background-color: #d3dce6;
@@ -42,7 +42,30 @@ export default {
   line-height: 200px;
 } */
 
-  body > .el-container {
+  /* body > .el-container {
     margin-bottom: 40px;
+  } */
+/* pc样式 */
+@media screen and (min-width: 992px) {
+  .container {
+    /* border: 1px solid red; */
+    min-width: 1291px;
   }
+}
+
+
+@media screen and (min-width: 320px) and (max-width: 992px) {
+  .el-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  NavBar {
+    border: 1px solid red;
+  }
+
+  
+}
+
+  
 </style>

test/src/views/layout/components/AppMain.vue

@@ -8,16 +8,28 @@
 
 <script>
 export default {
-  name: 'AppMain',
-  methods: {}
-}
+  name: "AppMain",
+  methods: {},
+};
 </script>
 
 <style scoped>
 .el-main {
-  /* border: 1px solid red; */
+  
   width: calc(100vw - 106px);
   height: calc(100vh - 60px);
   padding: 0;
 }
+
+@media screen and (min-width: 320px) and (max-width: 992px) {
+  .el-main {
+    /* border: 1px solid red; */
+    width: 100%;
+  }
+
+  .el-message-box__btns {
+    text-align: left !important;
+  }
+}
 </style>
+

test/src/views/layout/components/LeftAside.vue

@@ -1,60 +1,89 @@
 <template>
+  <el-card>
   <el-aside class="page-home-content">
     <div class="left">
-
-      <router-link   to="/LayOut" active-class="change" exact>
-          <div class="system-info">
-            <!-- <img src="../../../assets/system-Selected.png" alt="" /> -->
-            <img :src="aside[0].path === $route.path ? aside[0].selected : aside[0].normal" alt="" />
-
-            <span >系统信息</span>
-          </div>
+      <router-link to="/LayOut" active-class="change" exact>
+        <div class="system-info">
+          <!-- <img src="../../../assets/system-Selected.png" alt="" /> -->
+          <img :src="aside[0].path === $route.path ? aside[0].selected : aside[0].normal"/>
+          <span>系统信息</span>
+        </div>
       </router-link>
 
-      <router-link style="margin-top:35px"   to="/LayOut/banmange"  active-class="change" exact>
-        <div class="system-info"  >
+      <router-link style="margin-top: 35px" to="/LayOut/banmange" active-class="change" exact>
+        <div class="system-info">
           <!-- <img src="../../../assets/ban-Selected.png" alt="" /> -->
-            <img :src="aside[1].path === $route.path ? aside[1].selected : aside[1].normal" alt="" />
-          <span >四情封禁</span>
+          <img :src="aside[1].path === $route.path ? aside[1].selected : aside[1].normal" />
+          <span>四情封禁</span>
         </div>
       </router-link>
     </div>
+
+    
+
+      <div class="left-phone">
+        <router-link class="system-info-phone"  to="/LayOut" active-class="change" exact>
+          <div>
+            <span>系统信息</span>
+          </div>
+        </router-link>
+
+        <router-link class="system-info-phone" to="/LayOut/banmange" active-class="change" exact>
+          <div>
+            <span>四情封禁</span>
+          </div>
+        </router-link>
+      </div>
+
+    
   </el-aside>
+  </el-card>
 </template>
 
 <script>
 export default {
-  name: 'LeftAside',
-  data () {
+  name: "LeftAside",
+  data() {
     return {
       aside: [
-        { path: '/LayOut', normal: require('../../../assets/system.png'), selected: require('../../../assets/system-Selected.png') },
-        { path: '/LayOut/banmange', normal: require('../../../assets/ban.png'), selected: require('../../../assets/ban-Selected.png') }
-      ]
-
-    }
-  }
-
-}
+        {
+          path: "/LayOut",
+          normal: require("../../../assets/system.png"),
+          selected: require("../../../assets/system-Selected.png"),
+        },
+        {
+          path: "/LayOut/banmange",
+          normal: require("../../../assets/ban.png"),
+          selected: require("../../../assets/ban-Selected.png"),
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style scoped lang="less">
+/* pc页面样式 */
+@media screen and (min-width: 992px) {
+ 
 
-a{
-  text-decoration: none;
-  color: #6A7A88 ;
-}
-
-.change {
-  color: white;
-}
-
-.el-aside {
-  // border: 1px solid red;
-  width: 106px !important ;
-}
-
-.page-home-content {
+ 
+  
+  .left-phone {
+    display: none;
+  }
+  a {
+    text-decoration: none;
+    color: #6a7a88;
+  }
+  .change {
+    color: white;
+  }
+  .el-aside {
+    // border: 1px solid red;
+    width: 106px !important ;
+  }
+  .page-home-content {
     background-color: rgb(240, 242, 245);
     box-sizing: border-box;
     // height: 875px;
@@ -76,18 +105,99 @@ a{
       display: flex;
       align-items: center;
       flex-direction: column;
-
     }
-
     .system-info {
       display: flex;
       flex-direction: column;
     }
-
     img {
       width: 60px;
       height: 60px;
     }
+  }
+  ::v-deep {
+     .el-card__body {
+      padding: 0 !important;
+    }
+  }
+
+  
+}
+
+// 手机端样式
+@media screen and (min-width: 320px) and (max-width: 992px) {
+  .el-aside {
+    width: 100% !important;
+  }
+
+  .page-home-content {
+    // border: 1px solid red;
+    width: 100%;
+    height: 45px;
+    margin-top: 3px;
+    // background-color: #e3edee;
+  }
+  .left {
+    display: none;
+  }
+  .left-phone {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    // background-color: #040e1b;
+    // background-color: #828b943b;
+    // border: 1px solid red;
+    margin-top: 5px;
+    display: flex;
+    justify-content: space-between;
+  }
 
+  .left-phone .system-info-phone:nth-of-type(1) {
+    // border: 1px solid red;
+    text-align: right;
+  }
+
+  
+  img {
+    display: none;
+    width: 60px;
+    height: 60px;
+  }
+
+  // router-link样式
+  .system-info-phone {
+    width: 49%;
+    height: 40px;
+    // background-color: #32acdf;
+    // text-align: center;
+    line-height: 40px;
+    font-family: "黑体";
+    color: #666;
+    font-size: 20px;
+  }
+
+  // .change {
+  //   background-color: #92c133;
+  // }
+  .change {
+    color: #333;
+    font-size: 25px;
+  }
+
+  a {
+    text-decoration: none;
+    color: white;
+  }
+
+  .el-card {
+    // border: 1px solid red;
+    margin-bottom: 5px;
+  }
+
+  ::v-deep {
+     .el-card__body {
+      padding: 0 !important;
+    }
+  }
 }
 </style>

test/src/views/layout/components/NavBar.vue

@@ -20,88 +20,91 @@
 </template>
 <script>
 export default {
-  name: 'NavBar',
-  data () {
+  name: "NavBar",
+  data() {
     return {
-      nameLeft: '管理员', // 左边名字
-      nameRight: '管理员', // 右边名字
+      nameLeft: "管理员", // 左边名字
+      nameRight: "管理员", // 右边名字
       // headPortrait:"../../assets/OIP-C.jpg",//用户图片
-      week: '', // 左边周
-      data_show: '' // 左边时间
-    }
+      week: "", // 左边周
+      data_show: "", // 左边时间
+    };
   },
-  mounted () {
-    this.getDataTime()
+  mounted() {
+    this.getDataTime();
   },
   methods: {
     // 获取当前时间
-    getDataTime () {
-      const wk = new Date().getDay()
-      const yy = new Date().getFullYear()
-      const mm = new Date().getMonth() + 1
-      const dd = new Date().getDate()
+    getDataTime() {
+      const wk = new Date().getDay();
+      const yy = new Date().getFullYear();
+      const mm = new Date().getMonth() + 1;
+      const dd = new Date().getDate();
       const weeks = [
-        '星期日',
-        '星期一',
-        '星期二',
-        '星期三',
-        '星期四',
-        '星期五',
-        '星期六'
-      ]
-      this.week = weeks[wk]
-      this.data_show = yy + '年' + mm + '月' + dd + '日'
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      this.week = weeks[wk];
+      this.data_show = yy + "年" + mm + "月" + dd + "日";
     },
 
     // 用户退出
-    output () {
-      this.$confirm('确定要退出系统吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'error'
+    output() {
+      this.$confirm("确定要退出系统吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "error",
+        center:true
       })
         .then(() => {
           // 点击确定的操作(调用接口)
           // this.jiashuzu.splice(index, 1);
-          sessionStorage.removeItem('token')
-          this.$axios('/api/user/logout/', 'GET').then((data) => {
+          sessionStorage.removeItem("token");
+          this.$axios("/api/user/logout/", "GET").then((data) => {
             if (data) {
               this.$message({
-                type: 'success',
-                message: '已成功退出'
-              })
-              this.$router.go(0)
-              window.sessionStorage.clear()
+                type: "success",
+                message: "已成功退出",
+              });
+              this.$router.go(0);
+              window.sessionStorage.clear();
             } else {
               this.$message({
-                type: 'error',
-                message: '请稍后再试或者直接关闭浏览器'
-              })
+                type: "error",
+                message: "请稍后再试或者直接关闭浏览器",
+              });
             }
-          })
+          });
         })
         .catch(() => {
           // 点取消的提示
           this.$message({
-            type: 'success',
-            message: '已取消退出'
-          })
-        })
-    }
-  }
-}
+            type: "success",
+            message: "已取消退出",
+          });
+        });
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-.el-header {
-  width: 100%;
-  // border: 1px solid red;
-  background-color: #040e1b;
+/* pc页面样式 */
+@media screen and (min-width: 992px) {
+  .el-header {
+    width: 100%;
+    // border: 1px solid red;
+    background-color: #040e1b;
 
-  // color: #333;
-  text-align: center;
-  line-height: 60px;
-}
+    // color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
 
   .page-home-header {
     width: 100%;
@@ -160,5 +163,75 @@ export default {
       }
     }
   }
+}
+
+// 手机端样式
+@media screen and (min-width: 320px) and (max-width: 992px) {
+  .el-header {
+    width: 100%;
+    display: none;
+    // border: 1px solid red;
+    // background-color: #040e1b;
+    background-color: #32acdf;
+    color: white;
+    // text-align: center;
+    line-height: 60px;
+    padding: 0;
+    
+    
+  }
+
+  .page-home-header {
+    display: flex;
+    flex-direction: row;
+  }
 
+  .page-home-left {
+    // border: 1px solid red;
+    width: 60%;
+    margin-left: 15px;
+  }
+  .page-home-header {
+    width: 100%;
+    // background-color: #040e1b;
+    background-color: #32acdf;
+  }
+
+  .page-home-right {
+    // border: 1px solid red;
+    width: 40%;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .head-portrait,
+  .admin,
+  .line {
+    display: none;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .name {
+    display: none;
+  }
+
+  .out {
+    width: 30px;
+    height: 30px;
+    font-size: 30px;
+    text-align: center;
+    line-height: 60px;
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: 5px;
+    
+    
+  }
+}
 </style>

test/src/views/login/index.vue

@@ -18,71 +18,180 @@
         </form>
       </div>
     </div>
+
+    <div class="login-phone">
+      <div class="welcome"><img src="../../assets/welcome.png" /></div>
+      <div class="login-form">
+        <div class="login-inp">
+          <label>账号</label><input type="text" v-model="id" />
+        </div>
+        <div class="login-inp">
+          <label>密码</label><input type="password"  v-model="password" />
+        </div>
+        <div class="login-inp" style="background-color: #50b2f8;" @click="submit"><a href="#">立即登录</a></div>
+        
+      </div>
+    </div>
   </div>
 </template>
 <script>
 export default {
-  name: 'Login',
-  data () {
+  name: "Login",
+  data() {
     return {
-      id: '',
-      password: ''
-    }
+      id: "",
+      password: "",
+    };
   },
 
   methods: {
-    async submit () {
+    async submit() {
       const params = {
         username: this.id,
-        password: this.password
-      }
+        password: this.password,
+      };
 
-      const data = await this.$axios('/api/user/login/', 'POST', params)
-      console.log(data)
+      const data = await this.$axios("/api/user/login/", "POST", params);
+      // console.log(data)
 
       if (data.code === 0) {
-        this.$message.success('登录成功')
-        window.sessionStorage.setItem('token', 123)
-        this.$router.push('/LayOut')
+        this.$message.success("登录成功");
+        window.sessionStorage.setItem("token", 123);
+        this.$router.push("/LayOut");
       } else {
-        this.$message.error('登录失败')
+        this.$message.error("登录失败");
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
-.login {
-  text-align: center;
+/* pc页面样式 */
+@media screen and (min-width: 992px) {
+  .login-phone {
+    display: none;
+  }
+  .login {
+    text-align: center;
 
-  .inp {
-    margin-top: 200px;
-    border: 1px solid #66afe9;
-    padding: 40px 10px 10px;
-    width: 300px;
+    .inp {
+      margin-top: 200px;
+      border: 1px solid #66afe9;
+      padding: 40px 10px 10px;
+      width: 300px;
 
-    margin: 200px auto 0;
-    input {
-      border: 1px solid #ccc;
-      padding: 7px 0px;
-      border-radius: 3px;
-      padding-left: 5px;
-      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-      -webkit-transition: border-color ease-in-out 0.15s,
-        -webkit-box-shadow ease-in-out 0.15s;
-      -o-transition: border-color ease-in-out 0.15s,
-        box-shadow ease-in-out 0.15s;
-      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-    }
-    input:focus {
-      border-color: #66afe9;
-      outline: 0;
-      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-        0 0 8px rgba(102, 175, 233, 0.6);
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-        0 0 8px rgba(102, 175, 233, 0.6);
+      margin: 200px auto 0;
+      input {
+        border: 1px solid #ccc;
+        padding: 7px 0px;
+        border-radius: 3px;
+        padding-left: 5px;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -webkit-transition: border-color ease-in-out 0.15s,
+          -webkit-box-shadow ease-in-out 0.15s;
+        -o-transition: border-color ease-in-out 0.15s,
+          box-shadow ease-in-out 0.15s;
+        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+      }
+      input:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+          0 0 8px rgba(102, 175, 233, 0.6);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+          0 0 8px rgba(102, 175, 233, 0.6);
+      }
     }
   }
 }
+
+/* 手机页面样式 */
+@media screen and (min-width: 320px) and (max-width: 992px) {
+  html,
+  body,
+  div,
+  p,
+  form,
+  label,
+  ul,
+  li,
+  dl,
+  dt,
+  dd,
+  ol,
+  img,
+  button,
+  b,
+  em,
+  strong,
+  small,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    list-style: none;
+    font-style: normal;
+  }
+  .login {
+    display: none;
+  }
+  .login-phone {
+    width: 100%;
+    height: 100%;
+    background: url(../../assets/login-bg.png) no-repeat;
+    background-size: cover;
+    position: fixed;
+    z-index: -10;
+  }
+
+  .welcome {
+    width: 100%;
+    margin: 40% 0;
+}
+
+.welcome img {
+    width: 100%;
+}
+
+.login-inp {
+    margin: 0 30px 15px 30px;
+    border: 1px solid #fff;
+    border-radius: 25px;
+    
+}
+
+.login-inp label {
+    width: 4em;
+    text-align: center;
+    display: inline-block;
+    color: #fff;
+}
+
+.login-inp input {
+    line-height: 40px;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+    outline: none;
+}
+
+.login-inp a {
+    display: block;
+    width: 100%;
+    text-align: center;
+    line-height: 40px;
+    color: #fff;
+    font-size: 16px;
+    letter-spacing: 5px;
+    text-decoration: none;
+}
+
+
+}
 </style>

test/vue.config.js

@@ -8,9 +8,10 @@ module.exports = {
     // proxy:配置代理服务器,类似于Node.js中的http-proxy-middleware
     proxy: {
       '/api': { // 有api就转发
-        target: 'http://192.168.1.17:56789', // 转发到这个地址s
-        // target: 'http://192.168.1.109:56789', // 转发到这个地址s
+        // target: 'http://192.168.1.17:56789', // 转发到这个地址
+        target:'http://114.115.147.140:56789',//在线地址
 
+      
 
         changeOrigin: true, // 跨域
         pathRewrite: {