如今做那些网站致富,wordpress文章错乱,推荐家居企业网站建设,网站和软件建站效果【后期实现鼠标点击选中轮廓后给出一个弹窗显示相应的模型信息】
标签指示线参考我的上一篇文章
引言
Three.js不仅让WebGL的3D图形编程变得简单易懂#xff0c;还通过其强大的扩展库支持丰富的后期处理效果#xff0c;为3D场景增添无限魅力。本篇文章将引导您深入了…效果【后期实现鼠标点击选中轮廓后给出一个弹窗显示相应的模型信息】
标签指示线参考我的上一篇文章
引言
Three.js不仅让WebGL的3D图形编程变得简单易懂还通过其强大的扩展库支持丰富的后期处理效果为3D场景增添无限魅力。本篇文章将引导您深入了解如何在Three.js项目中利用EffectComposer结合一系列后期处理Pass如OutlinePass、SMAAPass等来实现场景中模型的点击高亮效果提升用户交互体验。
准备工作 首先确保您的项目中已正确安装并引入了Three.js及其相关后处理库。可以通过以下命令安装必要的依赖
npm install three对于后处理Pass由于它们通常位于three/examples目录下可能需要手动下载或使用npm包管理器安装对应的库。
导入所需模块
在您的JavaScript文件顶部导入实现高亮效果所需的模块
// 用于模型边缘高亮
import { EffectComposer } from three/examples/jsm/postprocessing/EffectComposer.js;
import { RenderPass } from three/examples/jsm/postprocessing/RenderPass.js;
import { OutlinePass } from three/examples/jsm/postprocessing/OutlinePass.js;
import { ShaderPass } from three/examples/jsm/postprocessing/ShaderPass.js;
import { FXAAShader } from three/examples/jsm/shaders/FXAAShader.js;
import { SMAAPass } from three/examples/jsm/postprocessing/SMAAPass.js;
import { UnrealBloomPass } from three/examples/jsm/postprocessing/UnrealBloomPass.js;配置EffectComposer与Passes
EffectComposer创建一个EffectComposer实例它是所有后期处理效果的容器。 RenderPass首先添加一个RenderPass用于渲染基础场景到一张纹理上。 OutlinePass紧接着添加OutlinePass并配置要高亮的模型。 FXAA/SMAA Pass可选地加入抗锯齿Pass如FXAAShader或SMAAPass提高边缘平滑度。 UnrealBloomPass如果需要还可以添加UnrealBloomPass以增强光照和视觉效果。
初始化EffectComposer与Passes
let composer;
let outlinePass;
let renderPass;
let effectFXAA;
let smaaPass;
let unrealBloomPass;
let previousPopup null; // 存储之前的弹窗
let popupTimeout null; // 存储定时器创建双击交互事件onMouseDblclick
addEventListener(dblclick, onMouseDblclick, false);实现双击交互获取与射线相交的对象数组
function onMouseDblclick(event) {let intersects getIntersects(event);if (intersects.length ! 0 intersects[0].object instanceof THREE.Mesh) {let selectedObject intersects[0].object;let selectedObjects [];selectedObjects.push(selectedObject.parent);outlineObj(selectedObjects);}
}获取与射线相交的对象数组函数getIntersects
//获取与射线相交的对象数组
function getIntersects(event) {let rayCaster new THREE.Raycaster();let mouse new THREE.Vector2();//通过鼠标点击位置计算出raycaster所需点的位置以屏幕为中心点范围-1到1mouse.x (event.clientX / window.innerWidth) * 2 - 1;mouse.y -(event.clientY / window.innerHeight) * 2 1; //这里为什么是-号没有就无法点中//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置rayCaster.setFromCamera(mouse, camera);return rayCaster.intersectObjects(scene.children, true);
}定义outlineObj函数进行高亮显示 其中轮廓高亮弹窗自行设置
function outlineObj(selectedObjects) {// 创建一个EffectComposer效果组合器对象然后在该对象上添加后期处理通道。// 用于模型边缘高亮composer new EffectComposer(renderer);composer.renderTarget1.texture.outputColorSpace THREE.sRGBEncoding;composer.renderTarget2.texture.outputColorSpace THREE.sRGBEncoding;composer.renderTarget1.texture.encoding THREE.sRGBEncoding;composer.renderTarget2.texture.encoding THREE.sRGBEncoding;// 新建一个场景通道 为了覆盖到原来的场景上renderPass new RenderPass(scene, camera);composer.addPass(renderPass);// 物体边缘发光通道outlinePass new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight),scene,camera,selectedObjects);outlinePass.selectedObjects selectedObjects;outlinePass.edgeStrength 10.0; // 边框的亮度outlinePass.edgeGlow 0.5; // 光晕[0,1]outlinePass.usePatternTexture false; // 是否使用父级的材质outlinePass.edgeThickness 1.0; // 边框宽度outlinePass.downSampleRatio 1; // 边框弯曲度outlinePass.pulsePeriod 5; // 呼吸闪烁的速度outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)); // 呼吸显示的颜色outlinePass.hiddenEdgeColor new THREE.Color(0, 0, 0); // 呼吸消失的颜色outlinePass.clear true;composer.addPass(outlinePass);// 自定义的着色器通道 作为参数// effectFXAA new ShaderPass(FXAAShader);// effectFXAA.uniforms.resolution.value.set(// 1 / window.innerWidth,// 1 / window.innerHeight// );// effectFXAA.renderToScreen true;// composer.addPass(effectFXAA);// // 抗锯齿// smaaPass new SMAAPass();// composer.addPass(smaaPass);// // 发光效果unrealBloomPass new UnrealBloomPass();unrealBloomPass.strength 0.1;unrealBloomPass.radius 0;unrealBloomPass.threshold 1;composer.addPass(unrealBloomPass);scene.background new THREE.Color(0x1b1824);
}渲染函数设置 if (composer) { composer.render(scene, camera); }: 这部分代码检查是否存在一个composer对象即EffectComposer实例如果存在则调用其render方法。EffectComposer是Three.js的一个后处理工具用于组合多种后期处理效果如模糊、高光、抗锯齿等它在基础渲染之上添加额外的视觉效果。这行代码确保了所有的后期处理Pass如之前提到的OutlinePass、SMAAPass等被正确执行。
//渲染循环函数
function render() {renderer.render(scene, camera); // 执行渲染操作renderer.autoClear true;controls.update(); // 更新控制器proxy.labelRender.render(scene, camera); // 渲染 CSS3D 标签if (composer) {composer.render(scene, camera);}requestAnimationFrame(render); // 请求下一帧
}全部代码
template!-- 用于展示Three.js场景的HTML容器 --div idmy-three/div
/templatescript setup
import { ref, reactive, onMounted, getCurrentInstance } from vue;
import * as THREE from three; // 导入Three.js库
import { OrbitControls } from three/examples/jsm/controls/OrbitControls; // 导入轨道控制器以实现场景的旋转、缩放等交互
import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader; // 导入GLTF模型加载器
import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js;
import {CSS2DRenderer,CSS2DObject,
} from three/examples/jsm/renderers/CSS2DRenderer.js;
import {CSS3DRenderer,CSS3DSprite,
} from three/examples/jsm/renderers/CSS3DRenderer.js;// 用于模型边缘高亮
import { EffectComposer } from three/examples/jsm/postprocessing/EffectComposer.js;
import { RenderPass } from three/examples/jsm/postprocessing/RenderPass.js;
import { OutlinePass } from three/examples/jsm/postprocessing/OutlinePass.js;
import { ShaderPass } from three/examples/jsm/postprocessing/ShaderPass.js;
import { FXAAShader } from three/examples/jsm/shaders/FXAAShader.js;
import { SMAAPass } from three/examples/jsm/postprocessing/SMAAPass.js;
import { UnrealBloomPass } from three/examples/jsm/postprocessing/UnrealBloomPass.js;const state reactive({pointerLineX: 90,pointerLineY: 90,pointerLineZ: -10,
});let composer;
let outlinePass;
let renderPass;
let effectFXAA;
let smaaPass;
let unrealBloomPass;
let previousPopup null; // 存储之前的弹窗
let popupTimeout null; // 存储定时器
// 初始化CSS2DRenderer
// const labelRenderer new CSS2DRenderer();
// labelRenderer.setSize(window.innerWidth, window.innerHeight);
// labelRenderer.domElement.style.position absolute;
// labelRenderer.domElement.style.top 0px;
// document.body.appendChild(labelRenderer.domElement);const { proxy } getCurrentInstance(); // 获取当前Vue组件实例const gui new GUI();// 设置cube纹理加载器,立方体纹理加载器
// const cubeTextureLoader new THREE.CubeTextureLoader();
// // 设置环境贴图
// const envMapTexture cubeTextureLoader.load([
// ../../public/csjkbz.jpg,
// ../../public/csjkbz.jpg,
// ../../public/csjkbz.jpg,
// ../../public/csjkbz.jpg,
// ../../public/csjkbz.jpg,
// ../../public/csjkbz.jpg,
// ]);
onMounted(() {document.getElementById(my-three)?.appendChild(renderer.domElement); // 将渲染器的DOM元素挂载到页面上init(); // 初始化场景、相机和光源// renderModel(); // 设置渲染参数gltfModel1(); // 加载GLTF模型render(); // 启动渲染循环
});// 定义场景宽度和高度
const width window.innerWidth,height window.innerHeight;
const scene new THREE.Scene(); // 创建场景
const renderer new THREE.WebGLRenderer(); // 创建渲染器
const loader new GLTFLoader(); // 创建GLTF加载器
const camera new THREE.PerspectiveCamera(45, width / height, 1, 10000); // 创建透视相机
const controls new OrbitControls(camera, renderer.domElement); // 创建控制器
let glbModel;function outlineObj(selectedObjects) {// 创建一个EffectComposer效果组合器对象然后在该对象上添加后期处理通道。// 用于模型边缘高亮composer new EffectComposer(renderer);composer.renderTarget1.texture.outputColorSpace THREE.sRGBEncoding;composer.renderTarget2.texture.outputColorSpace THREE.sRGBEncoding;composer.renderTarget1.texture.encoding THREE.sRGBEncoding;composer.renderTarget2.texture.encoding THREE.sRGBEncoding;// 新建一个场景通道 为了覆盖到原来的场景上renderPass new RenderPass(scene, camera);composer.addPass(renderPass);// 物体边缘发光通道outlinePass new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight),scene,camera,selectedObjects);outlinePass.selectedObjects selectedObjects;outlinePass.edgeStrength 10.0; // 边框的亮度outlinePass.edgeGlow 0.5; // 光晕[0,1]outlinePass.usePatternTexture false; // 是否使用父级的材质outlinePass.edgeThickness 1.0; // 边框宽度outlinePass.downSampleRatio 1; // 边框弯曲度outlinePass.pulsePeriod 5; // 呼吸闪烁的速度outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)); // 呼吸显示的颜色outlinePass.hiddenEdgeColor new THREE.Color(0, 0, 0); // 呼吸消失的颜色outlinePass.clear true;composer.addPass(outlinePass);// 自定义的着色器通道 作为参数// effectFXAA new ShaderPass(FXAAShader);// effectFXAA.uniforms.resolution.value.set(// 1 / window.innerWidth,// 1 / window.innerHeight// );// effectFXAA.renderToScreen true;// composer.addPass(effectFXAA);// // 抗锯齿// smaaPass new SMAAPass();// composer.addPass(smaaPass);// // 发光效果unrealBloomPass new UnrealBloomPass();unrealBloomPass.strength 0.1;unrealBloomPass.radius 0;unrealBloomPass.threshold 1;composer.addPass(unrealBloomPass);scene.background new THREE.Color(0x1b1824);
}function init() {// 光源设置const ambient new THREE.AmbientLight(0xffffff, 0.5); // 添加环境光scene.add(ambient);const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); // 添加平行光directionalLight.position.set(95, 585, 39); // 设置光源位置scene.add(directionalLight);const directionalLight4 new THREE.DirectionalLight(0xffffff, 0.8); // 添加平行光directionalLight.position.set(95, 585, 39); // 设置光源位置scene.add(directionalLight4);//设置相机位置camera.position.set(-20, 300, 700); // 设置相机位置//设置相机方向camera.lookAt(0, 0, 0); // 设置相机朝向场景中心//辅助坐标轴const axesHelper new THREE.AxesHelper(200); //参数200标示坐标系大小可以根据场景大小去设置scene.add(axesHelper);// 设置场景背景色 envMapTexturescene.background new THREE.Color(0x1b1824);// 设置渲染器像素比适应设备分辨率renderer.setPixelRatio(window.devicePixelRatio);renderer.antialias true;renderer.antialiasing Subpixel Morphological Anti-Aliasing; // 使用更高级别的抗锯齿算法// 设置渲染器参数renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.toneMapping THREE.ACESFilmicToneMapping;renderer.toneMappingExposure 2.5;// 初始化 CSS3DRendererconst labelRender new CSS3DRenderer();labelRender.setSize(window.innerWidth, window.innerHeight);labelRender.domElement.style.position absolute;labelRender.domElement.style.top 0px;labelRender.domElement.style.pointerEvents none;document.getElementById(my-three).appendChild(labelRender.domElement);proxy.labelRender labelRender;// 更新控制器controls.update();
}function gltfModel1() {// 加载GLTF模型loader.load(../../public/yuanqu.glb,function (gltf) {// 模型加载完成后的回调函数glbModel gltf.scene;scene.add(gltf.scene); // 将模型添加到场景中glbModel.traverse((object) {if (object.name fufachejian) {const worldPosition object.getWorldPosition(new THREE.Vector3());console.log(worldPosition, worldPosition);const div document.createElement(div);div.className workshop-text;div.innerHTML div classfufachejian/div;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(8, 3, 50); // 调整标签位置object.add(tag);createPointerLine(new THREE.Vector3(200, 17, -150),new THREE.Vector3(200, 45, -150),0x00ff00,1,#ff0000);}if (object.name bangongqu) {const div document.createElement(div);div.className workshop-text;div.innerHTML div classbangonglou/div;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(8, 3, 93); // 调整标签位置object.add(tag);createPointerLine(new THREE.Vector3(20, 103, -45),new THREE.Vector3(20, 131, -45),0x00ff00,1,#ff0000);}if (object.name qiye_01) {const div document.createElement(div);div.className workshop-text;div.innerHTML div classqiye/div;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(8, 3, 60); // 调整标签位置object.add(tag);createPointerLine(new THREE.Vector3(262, 40, 128),new THREE.Vector3(262, 68, 128),0x00ff00,1,#ff0000);}if (object.name qiye_002) {const div document.createElement(div);div.className workshop-text;div.innerHTML div classqiye/div;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(12, -5, 80); // 调整标签位置object.add(tag);createPointerLine(new THREE.Vector3(-200, 40, 128),new THREE.Vector3(-200, 68, 128),0x00ff00,1,#ff0000);}if (object.name chejian_06) {const div document.createElement(div);div.className workshop-text;// div.innerHTML p车间6/p;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(8, 3, 38); // 调整标签位置object.add(tag);}if (object.name chejian_03) {const div document.createElement(div);div.className workshop-text;// div.innerHTML p仓库3/p;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(8, 3, 38); // 调整标签位置object.add(tag);}if (object.name chejian_02) {const div document.createElement(div);div.className workshop-text;// div.innerHTML p仓库2/p;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(8, 3, 38); // 调整标签位置object.add(tag);}if (object.name chejian_01) {const div document.createElement(div);div.className workshop-text;// div.innerHTML p仓库1/p;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(8, 3, 38); // 调整标签位置object.add(tag);}if (object.name yuanliaolou) {const div document.createElement(div);div.className workshop-text;// div.innerHTML p原料楼/p;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(-10, -1, 38); // 调整标签位置object.add(tag);}if (object.name qizhan) {const div document.createElement(div);div.className workshop-text;// div.innerHTML p气站/p;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(-10, -1, 20); // 调整标签位置object.add(tag);}if (object.name yuanpian) {const div document.createElement(div);div.className workshop-text;// div.innerHTML p原片仓库/p;// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(-6, 7, 30); // 调整标签位置object.add(tag);}if (object.name yuchuli002 ||object.name yuchuli003 ||object.name yuchuli) {const div document.createElement(div);div.className workshop-text;if (object.name yuchuli002) {// div.innerHTML p预处理车间1/p;} else if (object.name yuchuli003) {// div.innerHTML p预处理车间2/p;} else if (object.name yuchuli) {// div.innerHTML p预处理车间1/p;}// 创建CSS3DSpriteconst tag new CSS3DSprite(div);tag.position.set(-6, 7, 30); // 调整标签位置object.add(tag);}});},function (xhr) {// 加载进度回调const percent Math.floor((xhr.loaded / xhr.total) * 100); // 计算加载进度百分比// console.log(模型加载进度${percent}%);});
}function renderModel() {//渲染renderer.setSize(width, height); //设置渲染区尺寸renderer.render(scene, camera); //执行渲染操作、指定场景、相机作为参数// renderer.setClearColor(0x00ff00); // 设置背景颜色为绿色/renderer.toneMapping THREE.ACESFilmicToneMapping;// 设置曝光度renderer.toneMappingExposure 1; // 适当调整曝光度// 设置控制器的角度限制// controls.minPolarAngle Math.PI / 4; // 最小极角为 45 度controls.maxPolarAngle Math.PI / 1; // 最大极角为 90 度
}// 创建指向线的函数
function createPointerLine(start, end, color, width, background) {// 创建指向线的几何体const geometry new THREE.BufferGeometry();const vertices new Float32Array([start.x,start.y,start.z,end.x,end.y,end.z,]);geometry.setAttribute(position, new THREE.BufferAttribute(vertices, 3));// 创建指向线的材质const material new THREE.LineBasicMaterial({color: #ff0000, // 指定线的颜色linewidth: width, // 设置线的宽度});// 创建指向线对象const line new THREE.Line(geometry, material);// 创建一个 Object3D 用于存放线const pointerGroup new THREE.Object3D();pointerGroup.add(line);// 计算线的方向向量const direction new THREE.Vector3().copy(end).sub(start).normalize();// 计算线头和线尾的位置, 设置圆饼偏移量const headPosition new THREE.Vector3().copy(start).addScaledVector(direction, 31.5);const tailPosition new THREE.Vector3().copy(end).addScaledVector(direction, -28);//贴图// 使用 TextureLoader 加载贴图const yxTextureLoader new THREE.TextureLoader();const yxTexture yxTextureLoader.load(../../public/label/yuandianTop.png); // 加载贴图// 创建线头圆饼const headGeometry new THREE.CircleGeometry(4, 32);const headMaterial new THREE.MeshBasicMaterial({color: #02f1ff, // 指定线尾的颜色side: THREE.DoubleSide, // 设置双面可见map: yxTexture, // 设置贴图transparent: true, // 设置材质为透明});const headMesh new THREE.Mesh(headGeometry, headMaterial);headMesh.position.copy(headPosition);// 创建线尾圆饼const tailGeometry new THREE.CircleGeometry(1, 32);const tailMaterial new THREE.MeshBasicMaterial({color: #02f1ff,side: THREE.DoubleSide,});const tailMesh new THREE.Mesh(tailGeometry, tailMaterial);tailMesh.position.copy(tailPosition);// 使用 TextureLoader 加载背景纹理图片const backgroundMaterial new THREE.MeshBasicMaterial({// map: backgroundTexture, // 设置背景的纹理贴图side: THREE.DoubleSide, // 设置双面可见color: #02f1ff,});const backgroundGeometry new THREE.PlaneGeometry(width,end.distanceTo(start), // 背景的长度即线段的长度1,1);const backgroundMesh new THREE.Mesh(backgroundGeometry, backgroundMaterial);// 设置背景的位置为线段的中点const midpoint new THREE.Vector3().copy(start).add(end).multiplyScalar(0.5);backgroundMesh.position.copy(midpoint); // 设置背景的朝向// 设置背景的朝向垂直方向上朝向相机位置,计算垂直方向上背景朝向的点即与相机位置相同高度的点const verticalLookAtPoint new THREE.Vector3(camera.position.x,backgroundMesh.position.y,camera.position.z);backgroundMesh.lookAt(verticalLookAtPoint);// backgroundMesh.up.set(0, 1, 0);// 将线和背景添加到场景中function updateOrientation() {headMesh.lookAt(camera.position); // 使线头始终朝向相机tailMesh.lookAt(camera.position); // 使线尾始终朝向相机// 获取相机的水平方向向量const cameraDirection camera.getWorldDirection(new THREE.Vector3()).normalize();const cameraHorizontalDirection new THREE.Vector3(cameraDirection.x,0,cameraDirection.z).normalize();// 让背景朝向相机的水平方向backgroundMesh.lookAt(backgroundMesh.position.clone().add(cameraHorizontalDirection));}// 在渲染循环中调用更新函数function render() {updateOrientation();requestAnimationFrame(render);}render();scene.add(headMesh);scene.add(backgroundMesh);scene.add(tailMesh);
}//渲染循环函数
function render() {renderer.render(scene, camera); // 执行渲染操作renderer.autoClear true;controls.update(); // 更新控制器proxy.labelRender.render(scene, camera); // 渲染 CSS3D 标签if (composer) {composer.render(scene, camera);}requestAnimationFrame(render); // 请求下一帧
}// 画布跟随窗口变化
window.onresize function () {renderer.setSize(window.innerWidth, window.innerHeight); // 重设渲染器尺寸camera.aspect window.innerWidth / window.innerHeight; // 更新相机的长宽比renderer.autoClear true;camera.updateProjectionMatrix(); // 更新相机的投影矩阵
};
window.addEventListener(keydown, function (event) {switch (event.key) {case ArrowLeft: // 按左箭头键moveLeft();break;case ArrowRight: // 按右箭头键moveRight();break;}
});// 交互事件
addEventListener(dblclick, onMouseDblclick, false);
function onMouseDblclick(event) {let intersects getIntersects(event);if (intersects.length ! 0 intersects[0].object instanceof THREE.Mesh) {let selectedObject intersects[0].object;let selectedObjects [];selectedObjects.push(selectedObject.parent);outlineObj(selectedObjects);}
}function moveLeft() {if (glbModel) {glbModel.position.x - 10; // 向左移动10单位}
}function moveRight() {if (glbModel) {glbModel.position.x 10; // 向右移动10单位}
}
//获取与射线相交的对象数组
function getIntersects(event) {let rayCaster new THREE.Raycaster();let mouse new THREE.Vector2();//通过鼠标点击位置计算出raycaster所需点的位置以屏幕为中心点范围-1到1mouse.x (event.clientX / window.innerWidth) * 2 - 1;mouse.y -(event.clientY / window.innerHeight) * 2 1; //这里为什么是-号没有就无法点中//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置rayCaster.setFromCamera(mouse, camera);return rayCaster.intersectObjects(scene.children, true);
}
/scriptstyle
#my-three {/* width: 100vh;height: 100vh; */
}
.aline {height: 500px;background: red !important;width: 10px !important; /* 设置线的宽度为 10px */background-color: #ff0000 !important; /* 设置线的背景色为红色 */
}
.workshop-textA {background: red !important;/* height: 50px !important; */display: block;
}
.workshop-text .fufachejian {height: 20px;width: 60px;background: url(../../public/label/ffcj.png);background-size: 100%;background-repeat: no-repeat;
}
.workshop-text .bangonglou {height: 20px;width: 60px;background: url(../../public/label/zhglbg.png);background-size: 100%;background-repeat: no-repeat;
}
.workshop-text .qiye {height: 20px;width: 60px;background: url(../../public/label/blcyltfwqy.png);background-size: 100%;background-repeat: no-repeat;
}
.workshop-text p {font-size: 0.9rem;font-weight: bold;padding: 10px;color: #0ff;
}#tag {padding: 0px 10px;border: #00ffff solid 1px;height: 40px;border-radius: 5px;width: 65px;
}
.taga {display: block;widows: 50px;height: 50px;background: red;
}
.taga p {height: 50px;width: 50px;background: red;
}
/style
