css毛玻璃效果/el-progress进度条渐变/axios的基本使用/跨域配置/关闭eslint验证

news2025/7/10 16:58:51

css磨砂效果

效果图

在这里插入图片描述

实现方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
      .container {
        height: 100vh;
        background-repeat: no-repeat;
      }
      .container,
      .box::before {
        background: url("xxx") 0 / cover fixed;
        z-index: -1;
      }
      .box {
        z-index: 5; /* 设置为最高层,不影响内容显示 */
        position: absolute;
        top: 30%;
        left: 35%;
        width: 500px;
        height: 370px;
        border-radius: 4%;
        text-align: center;
        background: hsla(0, 0%, 100%, 0.3);
        color: #f2e2e2;
      }

      .box::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        filter: blur(20px);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

关键点

/* 模糊处理 */
background: hsla(0, 0%, 100%, 0.3);
filter: blur(20px); 

HSLA(H,S,L,A)
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
A:Alpha透明度。取值0~1之间。

filter: blur(radius)
radius是半径,即屏幕上有多少像素相互融合,较大的值会产生更多模糊,单位px,不接受%

只给边框背景设置hsla只有边框半透明的效果:

在这里插入图片描述
要有像毛玻璃那样背景模糊的效果需要在box的底下再加上模糊的底层:

 .box::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        filter: blur(20px);
      }

el-progress进度条渐变

效果图:

在这里插入图片描述

实现方法

直接改内部样式:

::v-deep .el-bg-inner-running .el-progress-bar__inner {
  background: #9cecfb; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    #0052d4,
    #65c7f7,
    #9cecfb
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    #0052d4,
    #65c7f7,
    #9cecfb
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

axios的使用

安装

npm install axios
# 用于提交表单
npm install qs

配置

没有就自己建个
在这里插入图片描述

import axios from 'axios'
import qs from "qs"
const request = axios.create({
  timeout: 10 * 1000,
  headers: {
  	// 这里取决于后端要哪种
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
})
export default {
  // post类型
  postLogin: (data) => {
    return axios.post('/api/login', qs.stringify(data))
  },
  // get类型
  recommendmovieforuser: (data) => {
    return axios.get('/api/recommendmovieforuser?', data)
  }
}

使用

在需要用到接口的页面引入
在这里插入图片描述
调用接口

 某个方法名 () { // 接口调用
      api.之前暴露出的接口名(要传的数据)
        .then((res) => {
          if (!res) {
            return
          }
          console.log('res.data=', res.data)
          if (res.data.status != 200) {
            this.$message({
              message: res.data.message || "请求失败",
              type: "error",
            })
            return
          }
          this.$message({
            message: "请求成功",
            type: "success",
          })
          console.log('res.data.data=', res.data.data)
        })
        .catch(() => {
          this.$message.error('资源获取错误!')
        })
    },

跨域配置

修改vue.configs.js

比如说请求接口:http://192.168.222.11:3000/login,在api那里地址要写/api/login
在这里插入图片描述

 devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/api': {
        target: "http://192.168.xxx.xxx:xx/",//后端地址
        changeOrigin: true,//确定跨域
        pathRewrite: {
          '^/api': ''//这个就是以在写请求的时候加上这个api,然后这里重写去掉api
        }
      }
    }
  }

注意点: vue.configs.js修改后要再次yarn serve/npm run serve使其生效

关闭eslint验证

一般还是需要的,如果觉得没必要的话:

  1. 注释.eslintrc.js

在这里插入图片描述
2. 修改vue.config.js
在这里插入图片描述

transpileDependencies: true //

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/8858.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NNG pair 异步通信

一&#xff0c;利用NNG pair模式&#xff0c;实现异步通信。 二&#xff0c;manager端 绑定地址&#xff0c;回调函数里 接收 异步消息&#xff1a; #include <stdint.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <…

HTTP协议中Gzip格式的流量分析与识别

背景 在协议分析过程中&#xff0c;经常会发现gzip压缩的数据&#xff0c;例如在HTTP协议中&#xff0c;在HTTP头中会标示&#xff0c;内容编码为gzip、DEFLATE。 但是&#xff0c;还有很多情况&#xff0c;例如一些非HTTP协议&#xff0c;特别是私有协议中&#xff0c;数据同…

强大的图片处理工具GraphicsMagick

前言 项目中我们经常需要对图片进行压缩、剪切、添加水印、生成缩略图、图片合成等图片处理操作&#xff0c;关于这些图片复杂处理&#xff0c;我们将如何实现呢&#xff0c;本文将介绍GraphicsMagick对图片进行相关处理功能。 简介 GraphicsMagick是一个免费的创建、编辑、…

16.Redis系列之Redisson分布式锁原理

本文学习Redisson分布式锁的原理以及优缺点 1. Redisson分布式锁原理 lua脚本是原子操作&#xff0c;redis会将整个脚本作为一个整体执行&#xff0c;中间不会被其他命令打断 # RedissonLock.tryLockInnerAsync方法内lua脚本加锁 <T> RFuture<T> tryLockInnerAs…

代码随想录算法训练营第三十四天| LeetCode1005. K 次取反后最大化的数组和、LeetCode134. 加油站、LeetCode135. 分发糖果

一、LeetCode1005. K 次取反后最大化的数组和 1&#xff1a;题目描述&#xff08;1005. K 次取反后最大化的数组和&#xff09; 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。重复这个过…

TNF 又见 《Cell》

现有的研究表明&#xff0c;需要新的机会来增加免疫检查点封锁&#xff08;Immunecheckpoint blockade&#xff0c;ICB&#xff09;的影响。尽管干扰素&#xff08;IFN&#xff09;γ途径同时具有 ICB 抗性因子和治疗机会&#xff0c;但至今为止&#xff0c;研究人员尚未系统地…

采用新项目管理软件的四个步骤

这是采用新项目管理软件的有趣之处&#xff1a;它本身实际上是一个重大项目&#xff0c;而且您的组织越大&#xff0c;这个过程就越艰巨。 当然&#xff0c;成功的项目管理实施最终将有助于简化您的运营并最大限度地提高跨部门的效率——这有利于团队成员的士气、客户满意度…

国内外的免费AI作图工具

1.文心一格 文心一格 - AI艺术和创意辅助平台 “推荐”页面操作比较简单&#xff0c;只需要需要简单的一句话&#xff0c;等几分钟就可以直接生成&#xff1a; 主要可以用来生成不同“氛围感”十足的场景&#xff1a; 美丽的花田&#xff1a; 优点&#xff1a; 1.比较容易…

【数据结构】—— 二叉树(C)

二叉树 文章目录二叉树二叉树的概念&#xff1a;树的术语二叉树的大概样式先序创建二叉树二叉树的遍历方式先序遍历中序遍历后序遍历二叉树的概念&#xff1a; 二叉树&#xff08;Binary Tree&#xff09;是n(n>0)个结点的有限集合&#xff0c;该集合或者为空集&#xff08…

bugku-web-安慰奖

题目没给提示 点开链接 是空白页面 查看源代码 base64加密 拿去解码 备份文件 使用工具跑一下目录 &#xff08;dirsearch) 存在一个flag.php文件 但是访问没有结果 锁定index.php.bak 文件 下载下来 打开 进行代码审计 是php序列化 反序列化的内容 代码审计&…

【Python】Numpy生成坐标网格

文章目录meshgridmgrid和ogridindicesmeshgrid 在三维图的绘制过程中&#xff0c;一般需要x,y,zx,y,zx,y,z之间的对应关系&#xff0c;但对于图像而言&#xff0c;其x,yx,yx,y轴坐标是体现在像素栅格中的&#xff0c;从而图像矩阵中的像素强度&#xff0c;其实表示的是zzz轴的…

深度学习算法应用——使用LSTM对双色球进行统计与预测

前言 福彩双色球的玩法和规则是双色球投注区分为红色球号码区和蓝色球号码区&#xff0c;红色球号码从1-33&#xff0c;蓝色球号码是从1-16。投注方法是&#xff0c;从红色区选出6个不重复的号码再加上蓝色区的一个号组成一个投注组。双色球通过摇奖器确定中奖号码&#xff0c…

Zookeeper中的watch机制

客户端&#xff0c;可以通过在znode上设置watch&#xff0c;实现实时监听znode的变化Watch事件是⼀个⼀次性的触发器&#xff0c;当被设置了Watch的数据发⽣了改变的时候&#xff0c;则服务器将这个改变发送给设置了Watch的客户端⽗节点的创建&#xff0c;修改&#xff0c;删除…

观测云产品更新|新增观测云、SLS 联合解决方案;新增 3 个智能巡检配置文档;新增链路错误追踪查看器等

观测云更新 新增观测云、SLS 联合解决方案 观测云新增 SLS 存储方案&#xff0c;支持阿里云 SLS 用户能够快速使用观测云做数据查看分析。在观测云进行商业版注册/升级时&#xff0c;选择”阿里云账号结算“后&#xff0c;您可以选择SLS 存储方案&#xff0c;将数据存放在自…

SpringBoot SpringBoot 开发实用篇 1 热部署 1.3 热部署范围配置

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇1 热部署1.3 热部署范围配置1.3.1 问题引入1.3.2 热部署配置范围1.3.…

Spring Cloud(十):Spring Cloud Skywalking 以及 JavaAgent

链路追踪组件选型 Zipkin是Twitter开源的调用链分析工具&#xff0c;目前基于springcloud sleuth得到了广泛的使用&#xff0c;特点是轻量&#xff0c;使用部署简单。Pinpoint是韩国人开源的基于字节码注入的调用链分析&#xff0c;以及应用监控分析工具。特点是支持多种插件&…

CASIO程序(线路计算6.0版)

一、扩展变量设置说明 统计各种要素点的数目 各要素点数目表 名 称 平曲线交点 竖曲线变坡点 超高起始点 最多台阶数 线路导线点 数目&#xff08;个&#xff09; a b c d e 要素点数目为0时取值 -1 -5/3 0 0 0 备 注 不含起终点 不含起终点 含起…

【LeetCode 力扣】1.两数之和 Java实现 哈希表

题目链接&#xff1a;1.两数之和 1 原题描述&#xff1a; 2 解题思路 初看题目相信大家都能想到枚举的做法&#xff0c;简单来说把数组里面的所有值&#xff0c;均两两组合相加。若结果与target相等&#xff0c;则将两个数字的下标返回即可。 代码实现1&#xff1a; class …

C++入门学习5-共用体,枚举类型,宏定义

入门学习五共用体枚举类型宏定义共用体 共用体也称为联合体&#xff0c;其特点就是用一段连续的内存存储多个不同数据类型的数据&#xff0c;在写法上与结构体相似&#xff0c;但是在同一时刻&#xff0c;共用体中只有一个值是有效的&#xff0c;其大小由共用体中最大的数据类…

做PPT绝对不能错过这5个网站

免费高质量PPT模板网站&#xff0c;建议收藏&#xff01;1、菜鸟图库 https://www.sucai999.com/pptx.html?vNTYxMjky菜鸟图库里面有各种类型的PPT模板和素材。下载后模板可以直接套用&#xff0c;也可以自己添加素材进行修改。所有素材都一一进行了详细的分类&#xff0c;而且…