@ajaxjs/ui 1.1.8 → 1.2.0

package/src/pages/widgets.vue

@@ -0,0 +1,183 @@
+
+<template>
+  <div class="home">
+<!--     <h2>图片放大器</h2>
+    <div style="margin:0 auto;width:600px;text-align: center;">
+      <ImageEnlarger img-url="https://thebulletin.org/wp-content/uploads/2021/11/rosner-photo-1-150x150.jpg.webp" />
+      &nbsp;&nbsp;
+      <ImageEnlarger img-url="https://thebulletin.org/wp-content/uploads/2021/11/1280px-Construction_at_Vogtle_Nuclear_Plant-150x150.jpeg.webp" />
+    </div> -->
+
+    <h2>展开闭合器 expander</h2>
+    <p>常用于展开正文详情。提供过渡效果的图层，如果不需要把 div class="mask" 去掉即可。注意加入容器的 padding 会导致关闭时高度异常。</p>
+    <table class="aj-table" align="center">
+      <thead>
+        <tr>
+          <th>属性</th>
+          <th>含义</th>
+          <th>类型</th>
+          <th>是否必填，默认值</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>openHeight</td>
+          <td>展开状态的高度</td>
+          <td>Number</td>
+          <td>n, 200</td>
+        </tr>
+        <tr>
+          <td>closeHeight</td>
+          <td>闭合状态的高度</td>
+          <td>Number</td>
+          <td>n, 50</td>
+        </tr>
+        <tr>
+          <td><code>&lt;slot</code>&gt;</td>
+          <td>正文内容扩展</td>
+          <td>String</td>
+          <td>n</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <Expander :close-height="50" style="width: 300px;margin:5% auto;">
+      Lorem Ipsum，也称乱数假文或者哑元文本， 是印刷及排版领域所常用的虚拟文字。
+      由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书， Lorem Ipsum从西元15世纪起就被作为此领域的标准文本使用。
+      <div class="mask-layer"></div>
+    </Expander>
+
+    <h2>渐现 Banner</h2>
+    <p>原理上讲，就是为每张图片准备好定时器 timer，使其控制图片的透明度。当图片从透明度 0 到 100，就是渐现的过程； 与此同时，另外一张图片由透明度 100 下降到 0。这两个过程是同时发生的，一个渐现一个渐隐，便会造成如此的目标效果。</p>
+    <p><a href="https://zhangxin.blog.csdn.net/article/details/112055111" target="_blank">查看教程</a>
+    </p>
+
+    <OpacityBanner style="width:300px;margin:0 auto">
+      <li><img src="https://img1.mydrivers.com/img/topimg/20220315/192429144.jpg" /></li>
+      <li><img src="https://img1.mydrivers.com/img/topimg/20220315/192403940.jpg" /></li>
+      <li><img src="https://img1.mydrivers.com/img/topimg/20220315/192314256.jpg" /></li>
+      <li><a target="iframepage" href="../job/job.jsp">招聘管理</a></li>
+    </OpacityBanner>
+
+        <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <h2>进度条 Process Line</h2>
+    <ProcessLine />
+
+    <h2>折叠菜单 Accordion Menu</h2>
+    <p>折叠菜单的特点是同一时间只展开一个区域，其他区域则处于闭合状态。</p>
+
+    <p>属性说明：</p>
+    <table class="aj-table" align="center" width="500">
+      <thead>
+        <tr>
+          <th>属性</th>
+          <th>含义</th>
+          <th>类型</th>
+          <th>是否必填，默认值</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>&lt;slot&gt;</code></td>
+          <td>菜单内容</td>
+          <td>String</td>
+          <td>y</td>
+        </tr>
+      </tbody>
+    </table>
+    <br />
+    <br />
+    <br />
+    <AccordionMenu style="width:300px;margin:0 auto">
+      <li class="siteMgr">
+        <h3>网站管理</h3>
+        <ul>
+          <li><a target="iframepage" href="website/profile/changePassword.jsp">帐号信息</a></li>
+          <li><a target="iframepage" href="website/profile/companyInfo.jsp">公司信息</a></li>
+          <li><a target="iframepage" href="website/gallery/companyAlbum.jsp">相 册</a></li>
+          <li><a target="iframepage" href="website/pageEditor/index.jsp">页面维护</a></li>
+          <li><a target="iframepage" href="website/profile/global.jsp">全局信息</a></li>
+        </ul>
+      </li>
+
+      <li class="news">
+        <h3>新闻中心管理</h3>
+        <ul>
+          <li><a target="iframepage" href="entry/list/news">新闻管理</a></li>
+        </ul>
+      </li>
+      <li class="levelPoints">
+        <h3>积分系统</h3>
+        <ul>
+          <li><a target="iframepage" href="levelPoints/memberTree.jsp">会员下线一览</a>
+          </li>
+          <li><a target="iframepage" href="levelPoints/showUserPoints.jsp">显示会员积分</a></li>
+        </ul>
+      </li>
+      <li>
+        <h3>其他信息</h3>
+        <ul>
+          <li><a target="iframepage" href="../job/job.jsp">留言管理</a></li>
+          <li><a target="iframepage" href="../job/job.jsp">招聘管理</a></li>
+        </ul>
+      </li>
+    </AccordionMenu>
+
+    <br />
+    <br />
+
+    <h2>文章 Article</h2>
+        <Article title="新股上市首日破发并非坏事 警示投资者打新风险" author="张三" source="http://qq.com" style="max-width:700px;margin:0 auto">
+
+      <p class="one-p">10月22日是科创板新股<span class="linkNormal">中自科技</span>新股上市的日子。按照惯例，新股上市大都会给打新中签的投资者带来一笔无风险的“打新收益”。但对于中自科技的中签者来说，他们期待中的“打新收益”落空了，迎接他们的是新股上市首日破发的命运。打新中签者不仅没有得到“打新收益”，相反还要承担一定的“打新损失”，中自科技上市首日的收盘价较发行价下跌了6.87%。</p>
+      <p class="one-p">新股上市首日破发，这对于打新中签者来说是非常揪心的一件事情。尤其是中自科技开盘即破发，没有给中签者丝毫的逃命机会。当天的最高价是70.50元，低于70.90元的发行价，这意味着打新中签者悉数被套，全部都要为自己“中签”的好运而付出代价。</p>
+      <p class="one-p">那么，中自科技为何会出现上市首日破发现象呢？究其原因主要有两点。一是发行价偏高，高达每股70.90元，其动态市盈率达到百倍。二是今年该公司业绩大幅滑坡。该公司预计，2021年1~9月营业收入为8.6亿元~9.5亿元，同比下滑57.48%至53.03%；预计归母净利润为4500万元~5400万元，同比下滑75.33%至70.40%；预计扣非后归母净利润为3000万元~3900万元，同比下滑84.63%至80.02%。也正因如此，中自科技上市首日破发并不令人意外，这也进一步证实投资者打新之盲目了。</p>
+      <p class="one-p"><img class="content-picture" src="https://img1.mydrivers.com/img/20210706/S91792917-e725-484b-b8c9-b2d0eda32981.png">
+      </p>
+      <p class="one-p">当然，新股上市首日破发在A股市场还是比较少见的。中自科技是今年以来科创板第一家上市首日破发新股，也是科创板成立以来第二只上市首日破发新股。科创板第一只上市首日破发新股是<span class="linkNormal">建龙微纳</span>，其上市之日是2019年12月4日，距今已有一年零10个月，这也足见新股上市首日破发的现象在A股市场并不常见。</p>
+      <p class="one-p">实际上，对于A股市场来说，新股上市首日破发是一件好事。虽然对于A股市场来说，新股破发现象并不少见，但这种新股破发大多都是新股上市之后经过了一轮甚至是几番的市场炒作之后，然后股价回落破发。这样的新股破发除了提醒投资者注意市场炒作的风险之外，其意义并不大。相反，新股上市首日破发意义更加重大。</p>
+      <p class="one-p">首先，新股上市首日破发它有利于提醒询价机构理性询价，而不能为了得到新股份额一味报高价。因为参与新股询价的机构投资者在询价有效的情况下，也是要参与新股配售的。如果新股定价太高，上市就破发了，这对于询价机构来说当然也是不利的。因为他们参与的新股配售份额也会因为破发而出现浮亏。</p>
+      <p class="one-p">其次，新股上市首日破发也有利于向投资者提醒打新的风险。因为A股市场长期以来的新股不败现象，结果导致投资者在打新时逢新必打，根本就不关心新股的基本面，同时也不关心新股的发行价格，甚至将高价发行的新股视为“肉签”股。虽然在过去也经常出现新股破发现象，但新股经过一番炒作之后的破发，并没有危及到打新者的利益，并不会让打新者增加风险意识。而只有新股上市首日破发，才会直接损害到打新者的利益，只有在这种情况下，打新者才会真正意识到打新的风险，从而让打新者关心到新股的基本面，学会理性打新。当然，要达到这个目的，还需要新股上市首日破发现象进一步增加，呈现出一种常态化，这样更有利于投资者理性打新。</p>
+      <p class="one-p">此外，新股上市首日破发也有利于向市场警示炒新的风险。在新股不败的市场环境下，投资者除了盲目打新之外，还会盲目炒新，以至一只新股上市后，通常都会炒出几个、十几个甚至几十个涨停板出来。因此，一只新股上市，往往都会受到市场的投机炒作。而新股上市首日破发，对于炒新者是一个打击。因为炒新者盲目追进新股之后发现，股价不仅没有炒上去，相反股价在进一步下跌，炒新变成了套牢。因此，新股上市首日破发对于炒新者来说也是一种风险警示。</p>
+
+    </Article>
+  </div>
+</template>
+
+<script>
+import OpacityBanner from "@/widget/OpacityBanner.vue";
+import ProcessLine from "@/widget/ProcessLine.vue";
+import AccordionMenu from "@/widget/AccordionMenu.vue";
+import Expander from "@/widget/Expander";
+import ImageEnlarger from "@/widget/ImageEnlarger";
+import Article from '@/widget/Article.vue';
+
+export default {
+  components: {
+    OpacityBanner,
+    ProcessLine,
+    AccordionMenu,
+    Expander,
+    ImageEnlarger,
+    Article
+  },
+};
+</script>
+
+<style lang="less" scoped >
+p {
+  width: 500px;
+  // .aj-text-function();
+  margin: 20px auto;
+  text-indent: 2em;
+}
+h2 {
+  // text-align: left;
+  margin: 20px auto;
+}
+</style>

package/src/router/index.ts

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter, { RouteConfig } from 'vue-router'
+// import Home from '../views/Home.vue'
+
+Vue.use(VueRouter);
+
+const routes: Array<RouteConfig> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import(/* webpackChunkName: "about" */ '../pages/index.vue')
+  }
+];
+
+const router = new VueRouter({
+  routes
+});
+
+export default router;

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

package/src/style/common-functions.less

@@ -0,0 +1,294 @@
+:root {
+    --admin-main-color: #1e6bb8;
+}
+
+.aj-center-title () {
+    text-align    : center;
+    font-size     : 1.3rem;
+    font-weight   : bold;
+    letter-spacing: 5px;
+    padding       : 20px 0;
+}
+
+.aj-text-function() {
+    color         : #333;
+    line-height   : 160%;
+    margin        : 15px 0;
+    font-size     : .95rem;
+    letter-spacing: 1px;
+    text-align    : justify;
+}
+
+.centerBody (@defaultWidth: 1300px) {
+    max-width: @defaultWidth;
+    margin   : 0 auto;
+    width    : 100%;
+    height   : 100%;
+}
+
+.transition (@t) {
+    -webkit-transition: @t;
+    -moz-transition   : @t;
+    -ms-transition    : @t;
+    -o-transition     : @t;
+    transition        : @t;
+}
+
+.transition_withTransform (@t) {
+    -webkit-transition: -webkit-transform @t;
+    -moz-transition   : -moz-transform @t;
+    -ms-transition    : -moz-transform @t;
+    -o-transition     : -o-transform @t;
+    transition        : transform @t;
+}
+
+.transform (@t) {
+    -webkit-transform: @t;
+    -moz-transform   : @t;
+    -ms-transform    : @t;
+    -o-transform     : @t;
+    -transform       : @t;
+}
+
+.heightFx () {
+    .transition (300ms height ease-out);
+}
+
+.widthFx () {
+    .transition (200ms width ease-out);
+}
+
+.leftFx () {
+    .transition (200ms left linear);
+}
+
+// 解决使用CSS动画时闪烁的问题
+// http://ued.taobao.com/blog/2012/01/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/
+.fixTransitionFlash () {
+    backface-visibility        : hidden;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility   : hidden;
+}
+
+// 解决高度塌陷的问题 – 清除浮动 或叫 闭合浮动
+// http://www.iyunlu.com/view/css-xhtml/55.html
+// http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/
+// 强制换行
+.forceBreak () {
+    word-wrap : break-word;
+    word-break: break-all;
+}
+
+.giveHeight () {
+    overflow: hidden;
+    zoom    : 1;
+}
+
+// 透明度
+.imgOpacityShow (@time: 300ms) {
+    .transition (opacity @time ease-in);
+}
+
+// 旋转角度
+.rotate (@ro: 30deg) {
+    .transform (rotate(@ro));
+}
+
+// 渐变
+.gradient (@direction , @startColor , @endColor) {
+    background-image: -webkit-linear-gradient(@direction, @startColor, @endColor);
+    background-image: -moz-linear-gradient(@direction, @startColor, @endColor);
+    background-image: -ms-linear-gradient(@direction, @startColor, @endColor);
+    background-image: -o-linear-gradient(@direction, @startColor, @endColor);
+    background-image: linear-gradient(@direction, @startColor, @endColor);
+}
+
+// 渐变
+.gradient (@direction , @startColor , @midColor , @endColor) {
+    background-image: -webkit-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: -moz-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: -ms-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: -o-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: linear-gradient(@direction, @startColor, @midColor, @endColor);
+}
+
+.fadeIn (@duration) {
+    animation         : fade-in;
+    animation-duration: @duration;
+    -webkit-animation : fade-in @duration;
+}
+
+.fadeOut (@duration) {
+    animation         : fade-out-hide;
+    animation-duration: @duration;
+    -webkit-animation : fade-out-hide @duration;
+}
+.aj-text-title {
+    letter-spacing: 2px;
+    margin: 10px;
+}
+.aj-text-function() {
+    color         : #333;
+    line-height   : 160%;
+    margin        : 15px 0;
+    font-size     : .95rem;
+    letter-spacing: 1px;
+    text-align    : justify;
+}
+
+// 快速制作1px 表格边框，为需要设置的 table 元素加上 border 的class即可
+.aj-table {
+    border         : 1px lightgray solid;
+    border-collapse: collapse;
+    border-spacing : 0;
+
+    th {
+        background-color: #efefef;
+        letter-spacing  : 3px;
+    }
+
+    td,
+    th {
+        border     : 1px lightgray solid;
+        line-height: 160%;
+        height     : 120%;
+        padding    : 6px;
+    }
+
+    tr {
+        .transition (background-color 400ms ease-out);
+
+        &:nth-child(odd) {
+            background: #f5f5f5;
+            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+        }
+
+        &:hover {
+            background-color: #fbf8e9;
+        }
+    }
+
+}
+
+.aj-form-table {
+    border-collapse: collapse;
+    border-spacing : 0;
+
+    th {
+        background-color: #efefef;
+        letter-spacing  : 3px;
+    }
+
+    td,
+    th {
+        line-height: 160%;
+        height     : 120%;
+        padding    : 10px 15px;
+    }
+
+    tr {
+        .transition (background-color 400ms ease-out);
+
+        &:nth-child(odd) {
+            background: #f5f5f5;
+            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+        }
+
+        &:hover {
+            background-color: #fbf8e9;
+        }
+    }
+}
+
+.aj-btn-base() {
+    min-height         : 26px;
+    font-size          : .8rem;
+    //line-height: 100%;
+    padding            : .3em 2.3em;
+    margin             : 10px auto;
+    color              : #333;
+    letter-spacing     : .3em;
+    border-radius      : 4px;
+    border             : 1px solid #ccc;
+    border-bottom-color: #B4B4B4;
+    box-shadow         : 0 1px 3px rgba(0, 0, 0, 0.12);
+    text-shadow        : 0 1px 0 rgba(255, 255, 255, 0.8);
+    background-color   : lightgray;
+    background-repeat  : repeat-x;
+    transition         : background-image 0.5s linear 1s;
+    cursor             : pointer;
+    outline            : 0;
+    .gradient (to bottom, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 60%, rgba(225, 223, 226, 1) 100%);
+
+    img {
+        vertical-align: middle;
+    }
+
+    &:hover {
+        color       : black;
+        border-color: lighten(black, 65%);
+    }
+
+    &:active {
+        box-shadow  : inset 0 3px 5px rgba(0, 0, 0, .2);
+        border-color: lighten(black, 55%);
+    }
+
+    &:focus {
+        border-color: lighten(black, 60%);
+    }
+
+    &:hover {
+        background-position: 0px -10px;
+    }
+}
+
+.aj-btnsHolder {
+    text-align: center;
+    padding   : 2% 0;
+
+    button {
+        margin-right: 3% !important;
+    }
+}
+
+.aj-input-base() {
+    min-height      : 25px;
+    font-size       : .9rem;
+    border          : 1px solid #abadb3;
+    // border-radius   : 3px;
+    box-sizing      : border-box;
+    background-color: white;
+    transition      : border-color ease-in-out 200ms;
+    outline         : 0;
+    padding         : 2px;
+    vertical-align  : middle;
+    color           : #333;
+    // letter-spacing  : 1px;
+
+    &:hover,
+    &:focus {
+        // box-shadow      : 1px 2px 3px #e5e5e5 inset;
+        border-color: lighten(black, 45);
+    }
+}
+
+form.aj-form {
+    input[type=text], .form input[type=password], .form textarea{
+        .aj-input-base();
+    }
+    button {
+        .aj-btn-base();
+    }
+
+    select {
+        color: gray;
+        height: 25px;
+        border: 1px solid gray;
+    }
+    
+    select:hover {
+        border-color: black;
+    }
+    
+}

package/src/style/reset.less

@@ -0,0 +1,19 @@
+/* AJAXJS Base CSS */
+body,dl,dt,dd,ul,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h5{margin:0;padding:0;}
+h1,h2,h3,h4,h5{font-weight: normal;}img{border:0;}ul li{list-style-type:none}.hide{display:none}
+body {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;
+    font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;}
+
+/* a{text-decoration:none;color:#666;transition:color .4s ease-in-out;}
+a:hover{color:#000;}
+button{border:none;outline:0;cursor:pointer;letter-spacing:2px;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+input[type=password],input[type=text],select,textarea{outline:0;-moz-appearance:none;} */
+
+/* 手机端浏览器所显示的网页 CSS */
+@media screen and (max-width:480px) {
+    * {
+        -webkit-tap-highlight-color: transparent; /* 很多 Android 浏览器的 a 链接有边框，这里取消它  */
+        -webkit-touch-callout: none; /* 在 iOS 浏览器里面，假如用户长按 a 标签，都会出现默认的弹出菜单事件 */
+        /* -webkit-user-select:none; */
+    }
+}	

package/src/util/cookies.ts

@@ -0,0 +1,43 @@
+/**
+ * 获取某个 Cookie
+ * 
+ * @param name 键名称 
+ * @returns 值
+ */
+export function getCookie(name: string): string | null {
+    let arr: RegExpMatchArray, reg: RegExp = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+
+    if (arr = document.cookie.match(reg))
+        return unescape(arr[2]);
+    else
+        return null;
+}
+
+/**
+ * 设置某个 Cookie
+ * 
+ * @param name  键名称 
+ * @param value 值
+ */
+export function setCookie(name: string, value: string): void {
+    let days: number = 2, exp: Date = new Date();
+    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
+    // @ts-ignore
+    document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString();
+}
+
+/**
+ * 清空 Cookie
+ */
+export function delCookie(): void {
+    let keys = document.cookie.match(/[^ =;]+(?==)/g);
+
+    if (keys) {
+        let date: string = new Date(0).toUTCString();
+        for (let i = keys.length; i--;) {
+            document.cookie = keys[i] + '=0;path=/;expires=' + date; // 清除当前域名下的,例如：m.ratingdog.cn
+            document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + date; // 清除当前域名下的，例如 .m.ratingdog.cn
+            document.cookie = keys[i] + '=0;path=/;domain=' + location.host + ';expires=' + date; // 清除一级域名下的或指定的，例如 .ratingdog.cn
+        }
+    }
+}

package/src/util/dom.ts

@@ -0,0 +1,47 @@
+/**
+ * 向父级元素递归搜索
+ * 
+ * @param _el       当前所在元素
+ * @param tagName   目标标签名称
+ * @param className 目标元素样式类
+ * @returns 目标元素，找不到为 null
+ */
+export function up(_el: Element, tagName: string, className: string): Element | null {
+    if (tagName && className)
+        throw '只能任选一种参数，不能同时传';
+
+    let el: Element = _el.parentNode as Element;
+    tagName = tagName && tagName.toUpperCase();
+
+    while (el) {
+        if (tagName && el.tagName == tagName)
+            return el;
+
+        if (className && el.className && ~el.className.indexOf(className))
+            return el;
+
+        el = <Element>el.parentNode;
+    }
+
+    return null;
+}
+
+/**
+ * 加载脚本
+ * 
+ * @param url   脚本地址
+ * @param id    脚本元素 id，可选的
+ * @param cb    回调函数，可选的
+ */
+export function loadScript(url: string, id?: string, cb?: (ev: Event) => any): void {
+    let script: HTMLScriptElement = document.createElement("script");
+    script.src = url;
+
+    if (cb)
+        script.onload = cb;
+
+    if (id)
+        script.id = id;
+
+    document.getElementsByTagName("head")[0].appendChild(script);
+}