喜报项目小总结

问题总结

关于技术上的问题

​ 整体框架上

1. vue整体框架的搭建问题，项目开始前没有提前明确好各个界面之间的连、复用性组件、以及静态资源的放置使用规则。导致后出现了多次的复用性修改。

2. 关于gitlib ，git的一些操作不熟悉，经过这个小的试验，一些基本操作是可以了， 但很多操作还是要继续熟悉。

3. 关于vue打包，路由方式等方便知识的欠缺，在这些地方白白浪费了很长时间。

4. 页面适用性整体布局实现上。涉及到的知识点有

5. flex

6. vw、vh、em、rem以及@media的适配方式

   
   @media (min-width:240px) and (max-width:320px){#allcontext{font-size:12.8px!important}}
   
     @media (min-width:321px) and (max-width:360px){#allcontext{font-size:14.4px!important}}
   
     @media (min-width:361px) and (max-width:375px){#allcontext{font-size:15px!important}}
   
     @media (min-width:376px) and (max-width:384px){#allcontext{font-size:15.36px!important}}
   
     @media (min-width:385px) and (max-width:414px){#allcontext{font-size:16.56px!important}}
   
     @media (min-width:415px) and (max-width:450px){#allcontext{font-size:18px!important}}
   
     @media (min-width:451px) and (max-width:500px){#allcontext{font-size:20px!important}}
   
     @media (min-width:501px) and (max-width:550px){#allcontext{font-size:22px!important}}
   
     @media (min-width:551px) and (max-width:569px){#allcontext{font-size:22.72px!important}}
   
     @media (min-width:569px) and (max-width:640px){#allcontext{font-size:25.6px!important}}
   
     @media (min-width:641px) and (max-width:667px){#allcontext{font-size:26.68px!important}}
   
     @media (min-width:668px) and (max-width:736px){#allcontext{font-size:29.44px!important}}
   
     @media (min-width:738px) and (max-width:768px){#allcontext{font-size:30.72px!important}}
   
     @media (min-width:769px) and (max-width:900px){#allcontext{font-size:36px!important}}
   
     @media (min-width:901px) and (max-width:1080px){#allcontext{font-size:43.24px!important}}
   
     @media (min-width:1080px){#context{font-size:52px!important}}
   
   

7. 关于项目缩进问题，应该配置在VUE项目创建的时候中的配置。

具体的一些小问题

1. input 输入框前面的一个小图标<img src="\img\Snipaste_2020-08-09_14-41-13.png" alt="Snipaste_2020-08-09_14-41-13" style="zoom:50%;" />

        /* 背景图片的大小 */

        background-size: 2vh 2vh;

        /* 控制背景图片的重画 */

        background-repeat: no-repeat;

        /* 背景图片的位置 */

        background-position: 2vw center;

        /* 文本框中文本开始的位置 */

        padding-inline-start: 7vw;

  /*塞入要使用的背景图片*/

      background-image: url(../../assets/img/fas-fa-user-2.svg);

2. input中的替换字体(placeholder)的样式设置

<input id="name" class="font" type="text" v-model="name" placeholder="输入姓名" />

  /* WebKit browsers*/

  input::-webkit-input-placeholder {

    color: #FFD1D1;

    font-size: 2vh;

  }



  /* Mozilla Firefox 4 to 18 */

  input:-moz-placeholder {

    color: #FFD1D1;

    opacity: 1;

    font-size: 2vh;

  }



  /* Mozilla Firefox 19+ */

  input::-moz-placeholder {

    color: #FFD1D1;

    opacity: 1;

    font-size: 2vh;

  }



  /* Internet Explorer 10+ */

  input:-ms-input-placeholder {

    color: #FFD1D1;

    font-size: 2vh;

  }

3. 阴影（box-shadow、text-shadow）

/*给块级元素添加阴影*/

box-shadow: 1px 1px 1px rgba(0,0,0, 0.4);

/*给文本添加阴影*/

text-shadow:2px 2px 4px rgba(0,0,0,0.4);

4. 隐藏表格的分割线

<table rules=none cellspacing=0 align=center>

更多详情

5. 让超出宽度的字体用...替换（white-space和text-overflow）

    /* 先转换为块级元素 */

    display: block;

    /* hidden */

    overflow: hidden;

    /* 核心 */

    white-space: nowrap;

    text-overflow:ellipsis;

非技术层面的问题

1. 沟通交流的问题页面间交接点的沟通交流问题，好比这次和胜科学长的数据交接，中间就切换了好几种传输方式。

2. 测试阶段 基本拉胯，真机测试太少，很多问题都是到了手机端才发现去解决，理应花费更多时间的测试阶段，却潦草而过，导致后期徒增很多烦恼。

3. 表述问题自己的各种情况的表达方式上还有许多问题，表达事情和任务没有能简洁明确的表达出自己想要表达出的意思，有些还造成了一些相反的结果。