minman-tv/pages/index/guanYu.vue

<template>
	<view class="box">
		<view class="top_bg">
			<topBox :img="img" :width="width" :height="height"></topBox>
			<view class="" style="width: 15%; position: absolute; top: 26%; left: 9%; font-size: 16px; color: #1f6bb5">
				<view class="">厦门博合文化</view>
				<view class="">科技有限公司</view>
			</view>
			<view @click="backBtn" class="back">⬅返回上一级</view>
		</view>

		<view class="box_left">
			<view class="" style="display: flex; flex-wrap: wrap; width: 100%; height: 10%; position: relative; z-index: 3; margin-left: 2%; margin-top: 28%">
				<view class="right_tit">企业简介</view>
				<view class="right_txt">
					<view class="jieshao">
						厦门博合文化科技有限公司成立于2021年，致力于为行业提供文化遗产数字保护技术研发及运营服务，提高行业服务效率，降低管理成本。基于应用云计算、物联网、智能AI、边缘计算、无人机、5G网络等技术，集中管理、预防为主、信息汇总、挖掘传承的管理创新模式实现文化遗产数字化保护。长期与厦门大学等多所著名高校联合开发，利用互联网的创新思维打造智慧文化遗产保护应用服务平台。拥有16项软件著作权、专利技术等。核心业务,文化遗产数字化保护、文化传承服务平台、体育运营服务平台。
					</view>
					<view class="right_tit2">企业文化</view>
					<view class="right_txt2">
						<view class="jieshao">博合使命：更快更好地保护、挖掘、传承历史文化</view>
						<view class="">博合愿景：成为国内文化遗产数字化保护引领者</view>
						<view class="">博合宗旨：科技创造价值，文化引领未来</view>
						<view class="">博合目标：博合发展目标 博合业务目标</view>
						<view class="">博合价值观：守正、创新、诚信、协作</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box_right">
			<view class="banner">
				<view class="" style="font-size: 12px; letter-spacing: 0.3em; width: 65%; left: -64%; color: #1f6bb5; position: relative; top: -17%">
					<view class="">文化引领未来 科技创造价值</view>
					<!-- <view style="margin-left: 15%">文化遗产保护数字化</view> -->
				</view>

				<view class="right_tit2">闽南文化研究会简介</view>
				<view class="right_txt2">
					<view class="jieshao">xxx</view>
				</view>
				<!-- 	<view class="right_tit2">产品介绍</view>
				<view class="" style="width: 50%; height: 50%">
					<image @click="clickImg" class="img" :src="img_js[0]"></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			music: false,
			id: '',
			img: '/static/img/bh_logo.png',
			img_js: ['/static/img/gsjs.png'],
			width: '3%',
			height: '32%',

			list: [
				{
					name: '风动石',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv3.jpg',
					title: '风动石自古闻名，早在明代张岱的《夜航船·荒唐部》里就有记载：“漳州鹤鸣山上，有石高五丈，围一十八丈，天生大盘石阁之，风来则动，名风动石。”'
				},
				{
					name: '开漳圣王',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv4.jpg',
					title: '陈元光(657—711年)，字廷炬，号龙湖。唐朝光州固始县人（今河南省固始县人）。漳州首任刺史。他是闽台地区重要的民间信仰之一，被奉为开漳圣王。号称“蛮荒”之地的闽南，经济文化得到了迅速发展。 陈元光成为促进中原文化与闽越文化融合的奠基者。'
				},
				{
					name: '南普陀寺',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv5.jpg',
					title: '南普陀寺位于福建省厦门市五老峰前，背依秀奇群峰，面临碧澄海港，风景绝佳。它是一座千年古刹，始建于唐代，为闽南佛教胜地之一。'
				},
				{
					name: '威镇阁',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv6.jpg',
					title: '威镇阁高3层，采用阴阳八卦为顶面，阁上都用长宽相同的长方形巨石铺成八角形状，每块巨石按方位分别刻着“乾、坤、震、艮、坎、兑、巽、离”的方正大字，所以俗称八卦楼。该楼与芝山顶峰的威镇亭遥相对峙，互为犄角，故名为威镇阁'
				},
				{
					name: '燕尾脊',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv7.jpg',
					title: '燕尾脊是闽南传统建筑中最常见的屋顶建筑形式，它由正脊做成曲线的形状，两端往上翘起，类似上弦月形，在尾端分叉为二，像燕子的尾巴，所以称为燕尾脊。这屋脊两端轻盈飞起的燕尾，还有一个好听的名字叫：双燕归脊，它像两只归巢的燕子，祈求漂泊的游子早日归家的期待'
				},
				{
					name: '漳州文庙',
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv8.jpg',
					title: '漳州文庙位于市区修文西路，是我国四大孔庙之一，也是漳州城内最大的古建筑群，国家级重点文物保护单位。文庙始建于宋庆历四年（公元1044年），元、明、清均有重修，漳州府学亦设于此。漳州文庙具有很高的古文化和历史文物价值，是漳州文化发展史重要的实证物。'
				}
			]
		};
	},

	onLoad(o) {
		that = this;
		this.id = o.id;
	},
	filters: {
		removeHTMLTag(str) {
			str = str.replace(/<\/?[^>]*>/g, ''); // 去除HTML tag
			str = str.replace(/[ | ]*\n/g, '\n'); // 去除行尾空白
			str = str.replace(/\n[\s| | ]*\r/g, '\n'); //去除多余空行
			str = str.replace(/ /gi, ''); // 去掉
			const arrEntities = {
				lt: '<',
				gt: '>',
				nbsp: ' ',
				amp: '&',
				quot: '"'
			}; // 转义符换成普通字符
			str = str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
				return arrEntities[t];
			});
			return str;
		}
	},

	methods: {
		clickImg() {
			// let img = [];
			// img.push(this.list[this.id].image);
			uni.previewImage({
				urls: this.img_js, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '' // 当前显示图片的http链接，默认是第一个
			});
		},
		backBtn() {
			uni.navigateTo({
				url: '/pages/index/index?music=' + this.music
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	display: flex;
	height: 100vh;
	box-sizing: border-box;
}
.back {
	width: 12%;
	height: 25%;
	margin-left: 5%;
	margin-top: -2%;
	font-size: 12px;
}

.img {
	width: 100%;
	height: 100%;
}
.box_left {
	width: 42%;
	height: 100%;
	color: #1f6bb5;
	font-size: 12px;
	background: url('/static/img/my_bg.png') no-repeat center;
	background-size: 100% 100%;
}
.box_right {
	flex: 1;
	height: 100%;
	margin-left: -10%;
	z-index: 1;
	background: linear-gradient(90deg, rgba(240, 235, 222, 0.1) 0%, #f0ebde 15%, #f0ebde 100%);
}
.top_bg {
	width: 100%;
	position: absolute;
	color: #ffffff;
	z-index: 2;
	background: linear-gradient(10deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 100%);
}
.right_tit {
	margin-bottom: 2%;
	letter-spacing: 0.3em;
	font-size: 14px;
	color: #1f6bb5;
	margin-left: 6%;
}
.right_tit2 {
	margin-bottom: 2%;
	letter-spacing: 0.3em;
	font-size: 14px;
	color: #1f6bb5;
	margin-top: 2%;
}

.banner {
	width: 70%;
	height: 45%;
	margin-left: 25%;
	margin-top: 14%;
}
/* 字体滚动 */
/* @-webkit-keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
}

@keyframes rowup {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%); 
	}
} */
.right_txt {
	width: 95%;
	height: 45%;
	font-size: 12px;
	letter-spacing: 0.2em;
	margin-bottom: 1%;
	font-weight: 400;
	color: #1f6bb5;
	text-indent: 2.5em;
}
.right_txt2 {
	width: 95%;
	height: 45%;
	font-size: 12px;
	letter-spacing: 0.2em;
	font-weight: 400;
	color: #1f6bb5;
}
.jieshao {
	/* -webkit-animation: 25s rowup linear infinite normal;
	animation: 25s rowup linear infinite normal;
	animation-delay: 3s;
	overflow: hidden; */
}
/deep/.MsoNormal span {
	font-size: 12px !important;
	letter-spacing: 0.2em !important;
	font-weight: 400 !important;
	color: #aa734d !important;
	/* line-height: 70rpx !important; */
}
/deep/.MsoNormal {
	font-size: 12px !important;
	letter-spacing: 0.2em !important;
	font-weight: 400 !important;
	color: #aa734d !important;
	/* line-height: 70rpx !important; */
}
/deep/._undefined span {
	font-size: 12px !important;
	letter-spacing: 0.2em !important;
	font-weight: 400 !important;
	color: #aa734d !important;
	/* line-height: 70rpx !important; */
}
.btm_box {
	width: 100%;
	height: 50%;
}
.container {
	position: relative;
	display: inline-block;
	margin-right: 2%;
	text-align: center;
}
.mn_box {
	width: 18%;
	height: 90%;
	margin-left: 2%;
	box-sizing: border-box;
	border: 2px solid #fed57d;
}
</style>