aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
WangXiaoDong
2023-08-21 10:55:39 +08:00
parent fbac0907c4
commit d41b331e38
18 changed files with 3227 additions and 1162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

636
src/component/HomePage/layout.vue
View File

@@ -4,11 +4,12 @@
class="layout_modal"
v-model:visible="layout"
:footer="null"
width="47rem"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
:destroyOnClose="true"
>
<div class="layout_content">
<div class="layout_header">
@@ -19,14 +20,28 @@
></div>
</div>
<div class="layout_nav">
<div v-for="item,index in layoutList" :key="item">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
<img :src="item.imgUrl">
</div>
</div>
<div class="layout_centent" :class="{active:flex_direction}">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
<img :src="item.imgUrl">
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false">
<ul v-show="item.setPitch" class="layout_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li>
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layout_btn_left" v-compile.stop="'left'"></li>
<li class="layout_btn_right" v-compile.stop="'right'"></li>
<li class="layout_rotote" v-rotote.stop></li>
<li class="layout_translate" v-translate.stop></li>
<!-- <li class="layout_translate" v-translate.stop></li> -->
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
</ul>
</div>
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
<!-- <draggable
v-model="layoutList"
group="people"
@@ -48,12 +63,12 @@
</div>
</div>
</div>
<div class="layout_right">
<!-- <div class="layout_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
</div>
</div>
</div>
</div> -->
<div
class="button_second submit_button"
@click="submitTemplate()"
@@ -70,8 +85,10 @@
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import draggable from 'vuedraggable'
import domTurnImg from '@/tool/domTurnImg'
export default defineComponent({
props:["moodb_className",'flex_direction'],
components: {
@@ -83,12 +100,16 @@ export default defineComponent({
let templateFileList: any = ref([]);
let openClick: any = ref(1);
let drag = false;
let layoutList:any = ref([])
const content = ref<HTMLElement | null>(null);
return {
fileList,
layout,
templateFileList,
openClick,
drag,
layoutList,
content
};
},
data() {
@@ -99,31 +120,18 @@ export default defineComponent({
},
spin: true,
}),
moodTemplateId: "", //模板id
// moodTemplateId: "", //模板id
store: useStore(),
layoutList:computed(()=>{
return [...(useStore().state.UploadFilesModule.moodboardFiles),
...(useStore().state.UploadFilesModule.generateFiles),
...(useStore().state.UploadFilesModule.MaterialFiles)]
}),
layoutListaa:[
{
id_:1,
name:'2',
},
{
id_:2,
name:'2',
},
{
id_:3,
name:'2',
},
],
// layoutList:computed(()=>{
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
// ...(useStore().state.UploadFilesModule.generateFiles),
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
// }),
moodb : moodb.moodb_,
moodbList:{},
moodbClassName:[],
setabsolute:false,
};
},
@@ -131,44 +139,382 @@ export default defineComponent({
},
directives:{
//操作移动
layout:{
mounted (el,layout) {
// console.log(el,layout);
layout.value.style = {
rotate:'',
left:'',
top:'',
width:'',
height:'',
}
mounted (el,layout:any,binding) {
el.addEventListener('mousedown',(e: MouseEvent)=>{
e.stopPropagation()
el.parentElement.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px'
v.style.top = v.offsetTop+'px'
});
el.parentElement.children.forEach((v:any) => {
v.classList.add('active')
});
el.style.zIndex = GO.zIndex++
let left = el.style.left? el.style.left.replace(/px/g,'') : 0
let top = el.style.top? el.style.top.replace(/px/g,'') : 0
let mouseX = e.offsetX //鼠标点击位置到domleft距离
let mouseY = e.offsetY
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - Number(top)
let mouse = true
document.onmousemove = function(e:MouseEvent){
if(mouse){
el.style.left = e.x-mouseX - domX+'px'
el.style.top = e.y-mouseY - domY+'px'
if(el.offsetLeft <=0){
el.style.left = 0+'px'
}
if(el.offsetTop <=0){
el.style.top = 0+'px'
}
if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'px'
}
if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'px'
}
}
}
document.onmouseup = function(){
mouse = false
// document.onmousemove = false;
}
})
},
updated (el,layout) {
}
},
//操作大小
compile:{
mounted (el,compile) {
el.addEventListener('mousedown',(e: MouseEvent)=>{
e.stopPropagation()
let elParent = el.parentNode.parentNode
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px'
v.style.top = v.offsetTop+'px'
});
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
v.classList.add('active')
});
if(compile.value == 'right'){
}else if(compile.value == 'left'){
elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
elParent.style.left = 'auto'
}else if(compile.value == 'top'){
elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
elParent.style.top = 'auto'
}else if(compile.value == 'bottom'){
}
let gpsXY:any
let parent:any
if(compile.value == 'left' || compile.value == 'right'){
gpsXY = e.x
parent = elParent.offsetWidth
}else{
parent = elParent.offsetHeight
gpsXY = e.y
}
let mouse = true
document.onmousemove = function(e:MouseEvent){
if(mouse){
if(compile.value == 'left'){
elParent.style.width = parent + gpsXY - e.x + 'px'
}else if(compile.value == 'right'){
elParent.style.width = parent + e.x - gpsXY + 'px'
}else if(compile.value == 'top'){
elParent.style.height = parent + gpsXY - e.y + 'px'
}else if(compile.value == 'bottom'){
elParent.style.height = parent + e.y - gpsXY + 'px'
}
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
}
if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
}
if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
}
if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
}
}
}
document.onmouseup = function(){
mouse = false
}
})
}
},
//操作旋转
rotote:{
mounted(el){
let mouse = true;
let angle :any = 0
let num:any
let elParent = el.parentNode.parentNode
if(document.defaultView){
num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
}
// 添加鼠标按下事件监听器
el.addEventListener('mousedown', (e:MouseEvent) => {
e.stopPropagation()
mouse = true;
let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
document.addEventListener('mousemove', (e:MouseEvent) => {
if (mouse) {
let X = eX
let Y = eY
let x:any = e.pageX - X
let y:any = Y - e.pageY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
}
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
});
});
//缩放
let timeSwitch = true
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
if(timeSwitch){
timeSwitch = false
if((e as WheelEvent).deltaY > 0){
if(num <= 1){
num -= 0.05
}else{
num -= 0.1
}
}else{
//放大
if(num <= 1){
num += 0.05
}else{
num += 0.1
}
}
if(num >= 3){
num = 3
}else if (num < .2){
num = .2
}
setTimeout(() => {
timeSwitch = true
}, 100);
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
}
});
});
}
},
angle:{
mounted(el,angle){
let mouse = false;
el.addEventListener('mousedown', (e:MouseEvent) => {
e.stopPropagation()
el.parentNode.children.forEach((v:any) =>{
v.classList.add('eventNode')
})
mouse = true;
let elParent = el.parentNode.parentNode
let eX:any
let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
if (mouse) {
if(angle.value == 'right'){
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'top'){
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'left'){
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
}else if(angle.value == 'bottom'){
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
}
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}
}else{
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 50+'%'
elParent.style.borderTopLeftRadius = 50+'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 50+'%'
elParent.style.borderTopRightRadius = 50+'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 50+'%'
elParent.style.borderBottomRightRadius = 50+'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 50+'%'
elParent.style.borderBottomLeftRadius = 50+'%'
}
}
}
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
});
}
},
//移动图片
translate:{
mounted (el,layout:any,binding) {
el.addEventListener('mousedown',(e: MouseEvent)=>{
e.stopPropagation()
let elParent = el.parentNode.parentNode
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
let left = el.style.left? el.style.left.replace(/%/g,'') : 0
let top = el.style.top? el.style.top.replace(/%/g,'') : 0
let mouseX = e.offsetX //鼠标点击位置到domleft距离
let mouseY = e.offsetY
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - el.offsetTop
let mouse = true
document.onmousemove = function(e:MouseEvent){
if(mouse){
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
el.style.left = left
el.style.top = top;
el.previousSibling.style.top = top
el.previousSibling.style.left = left
elParent.firstChild.style.top = top
elParent.firstChild.style.left = left
if(el.offsetLeft <=0){
el.style.left = 0+'%'
el.previousSibling.style.left = 0+'%'
elParent.firstChild.style.left = 0+'%'
}
if(el.offsetTop <=0){
el.style.top = 0+'%'
el.previousSibling.style.top = 0+'%'
elParent.firstChild.style.top = 0+'%'
}
// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
// // el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'%'
// console.log(2);
// }
if(el.style.left.replace(/%/g,'')>=100){
el.style.left = 100+'%'
el.previousSibling.style.left = 100+'%'
elParent.firstChild.style.left = 100+'%'
}
// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
// el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'%'
// }
if(el.style.top.replace(/%/g,'')>=100){
el.style.top = 100+'%'
el.previousSibling.style.top = 100+'%'
elParent.firstChild.style.top = 100+'%'
}
}
}
document.onmouseup = function(){
mouse = false
}
})
},
}
},
methods: {
init(){
this.layout = !this.layout
let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
...this.store.state.UploadFilesModule.generateFiles,
...this.store.state.UploadFilesModule.MaterialFiles]
console.log(this.moodb[layoutList.length]);
let layoutList = this.store.state.UploadFilesModule.moodboard
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
this.layoutList = layoutList
this.moodbList = this.moodb[layoutList.length-1]
this.moodbClassName = this.moodb_className
},
setpitch(item:any){
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
item.setPitch = true
},
setmoodb(item:any){
console.log(item);
this.moodbClassName = item
this.$emit('setmoodbClass',this.moodbClassName)
if(this.content){
for (item of (this.content as any)) {
item.classList.remove('active')
item.style.top = ''
item.style.left = ''
item.style.right = ''
item.style.bottom = ''
item.style.width = ''
item.style.height = ''
}
}
},
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
layoutBtnTop(){
},
// setmoodbClassName(){
// },
@@ -196,7 +542,6 @@ export default defineComponent({
// document.body.appendChild(img);
// var w = img.offsetWidth;
// var h = img.offsetHeight;
// console.log(w,h);
// img.remove()
// })
@@ -214,15 +559,6 @@ export default defineComponent({
// },
randomRange(min: any, max: any, num: any) {
// min最小值，max最大值 num排除的值
let index = Math.floor(Math.random() * (max - min)) + min;
while (index === num) {
index = Math.floor(Math.random() * (max - min)) + min;
}
return index;
},
//随机重置图片顺序
// refetchTemplate() {
// let arr = Array.from({ length: this.templateFileList.length });
@@ -246,12 +582,24 @@ export default defineComponent({
changeTemplateModal(){
this.layout = !this.layout
},
//提交模板
submitTemplate() {
this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
this.store.commit("setMoodboardFile", this.fileList);
this.store.commit("setMoodTemplateId", this.moodTemplateId);
this.changeTemplateModal();
// this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
// this.store.commit("setMoodboardFile", this.fileList);
// this.store.commit("setMoodTemplateId", this.moodTemplateId);
// this.changeTemplateModal();
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
let layoutCentent = document.getElementById('layoutCentent')
console.log(layoutCentent);
setTimeout(() => {
console.log(domTurnImg(layoutCentent));
this.layout = false
}, 0);
},
},
});
@@ -259,10 +607,11 @@ export default defineComponent({
<style lang="less">
.layout_modal {
width: 80% !important;
max-width: 1150px;
.ant-modal-body {
padding: 0;
height: calc(60vh - 6.4rem);
// height: calc(65vh - 6.4rem);
height: 60rem;
}
.ant-modal-content{
border-radius: 1rem;
@@ -295,6 +644,13 @@ export default defineComponent({
display: flex;
margin-top: 2rem;
justify-content: center;
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
img{
width:5rem;
cursor: pointer;
@@ -303,54 +659,166 @@ export default defineComponent({
}
.layout_centent{
display: flex;
height: 60%;
height: 55%;
// height: 60%;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
width: 50%;
margin: auto;
padding: 3rem 0;
margin: 3rem auto;
overflow: hidden;
// padding: 3rem 0;
justify-content: space-between;
>div{
// width: 100%;
// height: 100%;
// display: flex;
// flex-direction: column;
// flex-wrap: wrap;
// align-content: space-around;
// margin: auto;
// justify-content: space-between;
}
position: relative;
user-select:none
&.active{
flex-direction: row;
// >div{
// }
}
.layout_btn{
list-style: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
li{
cursor: pointer;
// border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: rgb(20, 188, 255);
position: absolute;
z-index: 1049;
}
.layout_btn_top,.layout_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.layout_btn_top{
top: 0;
}
.layout_btn_bottom{
top: 100%;
}
.layout_btn_left,.layout_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.layout_btn_left{
left: 0;
}
.layout_btn_right{
left: 100%;
}
.layout_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.layout_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.layout_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
.layout_translate{
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
cursor: crosshair;
cursor: move;
}
.layout_angle_tr{
right: 0%;
top: 0;
}
.layout_angle_tl{
left: 0%;
top: 0;
}
.layout_angle_br{
right: 0%;
bottom: 0%;
}
.layout_angle_bl{
left: 0%;
bottom: 0%;
}
.eventNode{
pointer-events: none;
}
}
.layout_centent_bor{
}
.modal_imgItem{
position: relative;
img{
// >div{
// position: absolute;
// width: 100%;
// height: 100%;
// }
overflow: hidden;
&.active{
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
img{
// object-fit: cover;
// width: 100%;
// height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(1);
}
::selection {
// background: rgba(0,0,0,0);
// background: yellow;
}
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
@@ -360,7 +828,7 @@ export default defineComponent({
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
left: 2rem;
overflow-x: hidden;
// background-color: #000;
width: 8%;