vue仿制PHi静态页面--day02

一个游戏的页面，没有任何有用的功能，只是练习vue语法用

最后一个月，马上要备战期末了，所以我要咕咕咕。

1、目标

写完设置页面，放一下成果图。

2、UI组件的修复

昨天封装的Ui组件，因为z-index的问题把整个页面都盖住了，导致我不能进行页面操作

找了好久都找不到问题所在，耽误了很长时间，以后可不敢瞎写z-index了

去除之后一切正常

3、整体布局

分为左右两部分

左半部分为三个拖动条，右半部分为设置的效果预览

采用斜切 + 移动的方式绘制出区域

4、Range的美化

默认的range是很细小的，需要css的样式设定

.input input[type=range]{
    height: 5vh;
    flex: 1;
  }

  .input input[type="range"]::-webkit-slider-runnable-track{
    width: 5vh;
    height: 5vh;
    background-color: black;
    border-left: 5px solid white;
    border-right: 5px solid white;
  }

  .input input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /*//这三个是去掉滑块原有的默认样式，划重点！！*/
    width: 5vh;
    height: 5vh;
    color: white;
  }

 range样式

•  ::-webkit-slider-container              /*可以修改容器的若干样式*/
•  ::-webkit-slider-runnable-track      /*可以修改轨道的若干样式*/
•  ::-webkit-slider-thumb                   /*可以修改滑块的若干样式*/

不知道为什么滑块的样式不生效，以后在研究吧。

5、v-model双向绑定

html部分



script部分
data () {
      return {
        transition:0,
        scale:1,
        light:1,
      }
    },

6.watch

用于监听滑动条的变化，修改右侧的预览

watch: {
      transition(now,old){
        document.querySelector("#tap").style.top = - 90 / 3000 * now + 'vh';
      },
      scale(now,old){
        document.querySelector("#tap").style.width = 100 * now + 'px';
        document.querySelector("#tap").style.height = 10 * now + 'px';
      },
      light(now,old){
        document.querySelector('.box').style.filter = `brightness(${now})`
        console.log(document.querySelector('.box').style.filter);
      }

7.css滤镜

发现自己不会修改亮度，于是一查就发现了没见过的css属性——滤镜（filter）

《我在css学ps》

css滤镜

效果	英文	取值	说明
高斯模糊	blur	0~+	取值越大越模糊，不接受百分比
亮度	brightness	百分比	可以让图片看起来更亮或更暗，取值越大越亮
对比度	contrast	百分比	0%时图片为全黑
阴影	drop-shadow（x,y,b,c）	距离，高斯模糊，颜色	给图像设置一个合成在图像下面的阴影效果
去色	grayscale	百分比	100%完全变为灰色
色相旋转	hue-rotate	角度	给图像应用色相旋转，360为一个角度
反色	invert	百分比	100%表示完全反转，0%表示没变化
透明度	opacity	百分比	转化图像的透明程度。0%表示完全透明
饱和度	saturate	百分比	转换图像饱和度，0%表示完全不饱和
褐色	sepia	百分比	将图像转换为深褐,100%表示完全深褐色的

8、遗留问题

• Range的滑块样式不生效。
• 滑动条要不要封装成组件。
• 谱面延时问题。
• canvas不会用，判定线绘制问题

9、复习

v-model

watch

叨扰学长和大佬

range样式

css动画和滤镜

10、求助

有看到这里的大佬可以帮我解决下上面的问题吗QAQ

明天要被塞满了，咕咕咕。。。。。。。。

每日犯病：Neko，Neko，Neko，我要做Neko的狗！【该用户已被禁言】